html5绘图笔记 (二)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/daxianghaoshuai/article/details/83866912

设置阴影

• shadowBlur:阴影模糊度，浮点数越大越模糊
• shadowColor:阴影颜色
• shadowOffsetX:x方向的偏移
• shadowOffsetY:y方向的偏移

绘制路径

以下四步
1 调用ctx对象的 beginPath() 方法开始定义路径
2 调用ctx的各种方法添加路径
3 调用ctx的 closePath 方法关闭路径
4 调用ctx的 fill() 或 stroke() 方法来填充路径或者绘制路径边框

添加路径的方法

• arc() 方法创建弧/曲线(用于创建圆或部分圆)
• arcTo() 方法在画布上创建介于两个切线之间的弧/曲线
• bezierCurveTo() 方法通过使用便是三次贝塞尔曲线的指定控制点，向当前路径添加一个点。方法在画布上创建介于两个切线之间的弧/曲线
• lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
• moveTo() 把路径移动到画布中的指定点，不创建线条
• quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
• rect() 方法创建矩形

例子

 var can = document.getElementById("can");
                var ctx = can.getContext("2d");
                ctx.beginPath();
                ctx.moveTo(80,80);      //起点
                ctx.lineTo(200,200);    //终点
                ctx.lineWidth = 10
                ctx.closePath();
                ctx.strokeStyle="orange"    //此处是无法使用fillStyle属性的，因为线不分填充不填充
                ctx.stroke();       

效果如下所示，beginPath是线的起点左边，moveTo是线的终点坐标

绘制圆的代码如下

  var can = document.getElementById("can");
  var ctx = can.getContext("2d");
		ctx.beginPath();
		ctx.arc(100,75,80,0,1*Math.PI,true); //坐标,半径,起始角,结束角
		ctx.closePath()
		ctx.stroke();

效果如下

arc方法需要注意的是第四个和第五个参数，下面为w3cschool的参数解析