Html5 Canvas介绍

1. 获取绘图上下文

  var mycanvas = document.getElementById('mycanvas');

  var context = mycanvas.getContext('2d');

2. 绘图函数

    注:x = positionX y= position Y w = width h = height

    绘制矩形:

      strokeRect(x,y,w,h); -----边框矩形

      fillRect(x,y,w,h); ----填充矩形

    清除区域:

      clearRect(x,y,w,h);

    绘制路径:

      beginPath();清楚路径列表,每次绘制新的形状之前都要调用

      moveTo();开始绘制的坐标

      lineTo();绘制到哪里

      closePath();关闭路径形成闭合的图形,如果不想形成闭合图形就不需要添加

      stroke();执行描边,连线!!!!!!!!!!!!

      strokeStyle = '(十六进制颜色值)或(颜色英文拼写)';  设置描边颜色

      lineWidth();设置描边线条的粗细

      fillStyle = '(十六进制颜色值)或(颜色英文拼写)'; 设置填充颜色

      fill(); 执行填充

    绘制弧形:

      注:弧度 = 角度 * (Math.PI / 180)

      arc(x,y,radius(半径),startAngle(起始弧度),endAngle(终止弧度),counterclockwise(是否逆时针绘制));

      arcTo(x1,y1,x2,y2,ridius(弧的半径,半径小则离切线角越近));

      Html5 Canvas介绍

    绘制2次贝塞尔曲线:

      quadraticCurveTo(cpx(控制点坐标x),cpy(控制点坐标y),x(末端点x),y(末端点y));

      与moveTo();的起始点配合使用。

    绘制三次贝塞尔曲线:

      bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y); 有两个控制点,最后的x,y是结束点。

      与moveTo();的起始点配合使用。

  clip();定义遮罩层,只能显示遮罩层之间的内容

  透明度:使用rgba();

  线性渐变色:

    var  grandient = createLinearGradient(startX,startY,endX,endY) ;定义渐变区间

    grandient.addColorStop(0(比例),"blue");

    grandient.addColorStop(0.5(比例),"red");

    ctx.fillStyle = grandient;

    ctx.fill();

  放射渐变:

    var g = createRadialGradient(x1,y1,r1,x2,y2,r2); 两个圆的相交区域为渐变区间

    g.addColorStop();

    ……

    ctx.fillStyle = g;

    ctx.fill();

例子:绘制台球桌:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="text-align: center;">
<canvas id="mycanvas" width="500" height="500"/>
</body>
<script type="text/javascript">
var mycanvas = document.getElementById('mycanvas');
var ctx = mycanvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "#00ff00";
ctx.fillRect(0,0,500,500); //绘制白球
DrawWhiteTableBall(50,250,ctx); //绘制红球组
DrawRedTableBall(300,250,ctx); DrawRedTableBall(335,230,ctx);
DrawRedTableBall(335,270,ctx); DrawRedTableBall(370,210,ctx);
DrawRedTableBall(370,250,ctx);
DrawRedTableBall(370,290,ctx); DrawRedTableBall(405,190,ctx);
DrawRedTableBall(405,230,ctx);
DrawRedTableBall(405,270,ctx);
DrawRedTableBall(405,310,ctx); function DrawRedTableBall(positionX,positionY,ctx){
ctx.beginPath();
ctx.arc(positionX,positionY,20,0,360*Math.PI/180,false);
var g = ctx.createRadialGradient(positionX-4,positionY-4,5,positionX,positionY,20);
g.addColorStop(0,"#ffffff");
g.addColorStop(1,"#ff0000");
ctx.fillStyle = g;
// ctx.fillRect(positionX,positionY,positionX+20,positionY+20);
ctx.fill();
} function DrawWhiteTableBall(positionX,positionY,ctx){
ctx.beginPath();
ctx.arc(positionX,positionY,20,0,360*Math.PI/180,false);
var g = ctx.createRadialGradient(positionX-4,positionY-4,5,positionX,positionY,20);
g.addColorStop(0,"rgba(255,255,255,1)");
g.addColorStop(1,"rgba(255,255,255,0.8)");
ctx.fillStyle = g;
ctx.fill();
// ctx.fillRect(positionX,positionY,positionX+20,positionY+20);
}
</script>
</html>

放射渐变的理论参考这个大佬的讲解,写的很清楚:

  https://www.cnblogs.com/tianma3798/p/5895811.html

上一篇:HTML5页面介绍


下一篇:paip.输出内容替换在Apache 过滤器filter的设置