版权声明:本文为博主原创文章,未经博主允许不得转载。 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的参数解析