H5 canvas 基础二

HTML5 canvas画布

创建canvas元素

创建了一个canvas元素，并规定了元素的id，宽度和高度。

<canvas id="can" width="500px" height="500px" ></canvas>

二次贝塞尔曲线

<script>  
    var can = document.getElementById('can');
    var cxt = can.getContext('2d');
    cxt.moveTo(10,80);
    //创建二次贝塞尔曲线
    cxt.quadraticCurveTo(35,240,200,80);
    cxt.stroke();
</script>

quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
JavaScript 语法：
context.quadraticCurveTo(cpx,cpy,x,y);
cpx 贝塞尔控制点的 x 坐标
cpy 贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
三次贝塞尔曲线

<script >
    var can = document.getElementById('can');
    var cxt = can.getContext('2d');
    cxt.moveTo(10,40);
    cxt.bezierCurveTo(30,80,60,0,90,40)
    cxt.stroke();
</script>

bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
JavaScript 语法：
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
cp1x 第一个贝塞尔控制点的 x 坐标
cp1y 第一个贝塞尔控制点的 y 坐标
cp2x 第二个贝塞尔控制点的 x 坐标
cp2y 第二个贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
圆角矩形

<script  >
     var can = document.getElementById('can');
    var cxt = can.getContext('2d');
    cxt.moveTo(30,30); // 创建开始点
    cxt.arcTo(200,30,200,40,20)// 创建弧
    cxt.stroke()
</script>

接下来，我们画一个完整的圆角矩形：

<script>
    var can = document.getElementById('can');
    var cxt = can.getContext('2d');
    cxt.moveTo(30,30); // 创建开始点
    cxt.arcTo(200,30,200,40,20)// 创建弧
    cxt.arcTo(200,200,190,200,20)
    cxt.arcTo(30,200,30,190,20)
    cxt.arcTo(30,30,40,30,20)
    cxt.stroke()
</script>

这样写左上角会出现一个多余的线

我们这样把最开始定义的moveTo起始点的X加个弯曲的值20。

cxt.moveTo(50,30); // 完善后的开始点

arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。
context.fillRect(x1,y1,x2,y2,r);
x1 弧的起点的 x 坐标
y1 弧的起点的 y 坐标
x2 弧的终点的 x 坐标
y2 弧的终点的 y 坐标
r 弧的半径
其实arcTo的参数，第一二个参数决定了弧起点的位置，第三四个参数决定了这个弧朝哪里弯，第五个参数，就是圆角的像素，就像是border-radius 一样。
阴影效果

<script >
    var can = document.getElementById('can');
    var cxt = can.getContext('2d');
    cxt.shadowColor="#c84300"//设置或返回用于阴影的颜色
    cxt.shadowOffsetX=20;//设置或返回阴影距形状的水平距离
    cxt.shadowOffsetY=20//设置或返回阴影距形状的垂直距离
    cxt.shadowBlur=10;//设置或返回用于阴影的模糊级别
    cxt.strokeStyle='#FFB000'//设置或返回用于笔触的颜色、渐变或模式
    cxt.lineWidth=10;//设置或返回当前的线条宽度
    cxt.strokeRect(50,50,100,100)//绘制矩形（无填充）
</script>