HTML5的学习之canvas画布(三)

HTML5的学习之canvas画布

上篇博客主要讲解了canvas线条有关的一些属性和方法。这篇文章我们继续学习canvas有关图形绘制的方法。

1.矩形

方法	描述
rect()	创建矩形。
fillRect()	绘制"被填充"的矩形。
strokeRect()	绘制矩形（无填充）。
clearRect()	在给定的矩形内清除指定的像素。

2.圆形

方法	描述
arc()	创建弧/曲线（用于创建圆形或部分圆）。
arcTo()	创建两切线之间的弧/曲线。
ellipse()	创建椭圆。

3.路径

方法	描述
fill()	填充当前绘图（路径）。
stroke()	绘制已定义的路径。
beginPath()	起始一条路径，或重置当前路径。
moveTo()	把路径移动到画布中的指定点，不创建线条。
closePath()	创建从当前点回到起始点的路径。
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条。
clip()	从原始画布剪切任意形状和尺寸的区域。
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false。
quadraticCurveTo()	创建二次贝塞尔曲线。
bezierCurveTo()	创建三次贝塞尔曲线。

路径HTML代码：

    <canvas id="my_canvas"></canvas>

路径JavaScript代码：

    // 03canvas画布的路径
    // 1.获取元素
    var oCanvas = document.getElementById("my_canvas");
    // 2.设置画布大小
    oCanvas.width = "1000";
    oCanvas.height = "1000";
    // 3.获取 画布环境
    var myCanvas = oCanvas.getContext("2d");
    // 4.绘图

    
    // fill()	填充当前绘图（路径）。
    // myCanvas.fillStyle="skyblue";
    // myCanvas.rect(0, 0, 200, 200);
    // myCanvas.fill();
    // stroke()	绘制已定义的路径。
    // myCanvas.strokeStyle="yellow";
    // myCanvas.rect(0, 0, 200, 200);
    // myCanvas.stroke();

    // beginPath()	起始一条路径，或重置当前路径。
    myCanvas.beginPath();//开始   路径
    myCanvas.lineWidth="10";
    myCanvas.strokeStyle="yellow";

    // moveTo()	把路径移动到画布中的指定点，不创建线条。
    myCanvas.moveTo(0,50);
    // lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条。
    myCanvas.lineTo(200,200);
    myCanvas.lineJoin="miter";//尖角
    myCanvas.lineJoin="round";//圆角
    myCanvas.lineJoin="bevel";;//斜角
    myCanvas.lineTo(300,100);

    myCanvas.lineTo(400,500);
    myCanvas.lineTo(100,400);
    myCanvas.closePath();
    myCanvas.stroke();
    // closePath()	创建从当前点回到起始点的路径。  

圆形HTML代码：

    <canvas id="my_canvas"></canvas>

圆形JavaScript代码：

    // 1.获取元素
    var oCanvas = document.getElementById("my_canvas");
    // 2.设置画布大小
    oCanvas.width = "1000";
    oCanvas.height = "1000";
    // 3.获取 画布环境
    var myCanvas = oCanvas.getContext("2d");
    // 4.绘图
    // beginPath()	起始一条路径，或重置当前路径
    // myCanvas.beginPath();//路径开始
    // // arc(x,y,r,起始角,结束角,false顺/true逆)	创建弧/曲线（用于创建圆形或部分圆）。
    // myCanvas.lineWidth="10";    
    // // myCanvas.strokeStyle="yellow";
    // myCanvas.fillStyle="yellow";
    // myCanvas.arc(500,500,200,0,Math.PI/2,true);
    // myCanvas.closePath();
    // // myCanvas.stroke();
    // myCanvas.fill();


    // arcTo(x1,y1,x2,y2,r)	创建两切线之间的弧/曲线。
    myCanvas.beginPath();
    myCanvas.moveTo(50,50);
    myCanvas.lineTo(200,50);
    myCanvas.arcTo(300,50,300,150,100);
    myCanvas.lineTo(300,300);
    myCanvas.stroke();

视频讲解链接：
https://www.bilibili.com/video/BV1Fv41167hL/