canvas元素学习笔记

一、元素的一些特点：

<canvas>（画布）：只有width、height两个属性，默认 width为300、height为150，单位都是px，可通过css设置，但是如宽高属性和初始比例不一致，画的图像会出现扭曲，所以尽量不要用css设置宽高属性。此外，该元素是成对的<canvas>如果你的浏览器不支持该元素，那么就会显示这里的内容</canvas>。

可通过以下代码检测支持性：

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

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

栅格与坐标空间：

canvas元素默认被栅格覆盖，一个小格子就是一像素点。栅格的起点为左上角（坐标为（0,0）），所有元素的位置都相对于原点（0,0）定位，所以下图中蓝色方形左上角的坐标为距离左边（Y轴）x像素，距离上边（X轴）y像素（坐标为（x,y））。

二、绘制形状：

1、绘制矩形

用到的方法或属性：fillRect(x, y, width, height)：绘制矩形块（默认黑色）、

　　　　　　　　　fillStyle：设置矩形块的样式、

　　　　　　　　　strokeRect(x, y, width, height)：绘制矩形框、

　　　　　　　　　clearRect(x, y, width, height)：清除矩形块（橡皮擦效果）。

　　　　　　　　　x、y指的是离canvas左上角的距离。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas学习</title>
        <style>
            #mycanvas {
                border: 1px solid;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="500px" height="400px">
            你的浏览器不支持canvas，请升级版本！
        </canvas>
        <script>
            var vanvas = document.querySelector("#mycanvas");
            var ctx = vanvas.getContext("2d")
            // 默认为黑色矩形
            ctx.fillRect(30, 30, 100, 100)
            // 设置填充颜色
            ctx.fillStyle = "black"
            ctx.fillRect(200, 100, 100, 200)
            // 绘制矩形框
            ctx.strokeRect(30, 200, 100, 100)
            // 清除矩形中的填充（橡皮）
            ctx.clearRect(50, 50, 30, 30)
        </script>
    </body>
</html>

2、绘制路径：

　　图形的基本元素就是路径，是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个

使用路径绘制图形的步骤：

1、创建路径起始点；

2、使用图形绘制命令画出路径；

3、关闭路径；

4、描边或者填充（自动关闭）。

要用到的函数：

beginPath( )：新建一条路径（与之前画的无关了，重新开始画）；

moveTo(x, y)：将画笔移动到制定坐标上（落笔）；

lineTo(x, y)：绘制一条从当前位置到指定位置的直线；

closePath( )：这个方法会通过绘制一条从当前点到开始点的直线来闭合图形，闭合路径之后图形绘制命令又重新指向到上下文中；

stroke( )：通过线条绘制图形轮廓（将绘制的路径描出来）；

fill( )：填充绘制的路径内容区域或者生成实心图形。

三角形

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas学习</title>
        <style>
            #mycanvas {
                border: 1px solid;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="500" height="400">
            你的浏览器不支持canvas，请升级版本！
        </canvas>
        <script>
            var canvas = document.querySelector("canvas");
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(50, 50);
            ctx.lineTo(50, 200);
            ctx.lineTo(200, 50);
            // 自动闭合路径
            ctx.fill()
　　　　 // 可通过moveTo重新选择开始点，不然下一图形仍以上一个图形的开始点为开始点
        // 画新的图需要重新建路径，后面的画图指令总是会作用同一路径上前面所画的

            ctx.beginPath();
            ctx.moveTo(200, 50);
            ctx.lineTo(200, 200);
            ctx.lineTo(50, 200);
            ctx.closePath();
            ctx.stroke();
        </script>
    </body>
</html>

线

注意：开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，可以通过moveTo( )重新选点。

    <body>
        <canvas id="mycanvas" width="500" height="400">
            你的浏览器不支持canvas，请升级版本！
        </canvas>
        <script>
            var canvas = document.querySelector("canvas");
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(50, 50);
            ctx.lineTo(50, 200);
            ctx.lineTo(200, 50);
            ctx.lineTo(100, 20);
            ctx.lineTo(200, 50);
            ctx.stroke()
            // 选择新的开始点，不然一直以上一点的结束点作为开始
            ctx.moveTo(200,300);
            ctx.lineTo(250,280);
            ctx.stroke();
        </script>
    </body>

圆弧

实现圆弧用的是arc( )方法，也可以使用arcTo( )，不过MDN说这个方法实现起来不可靠，那还是不要用吧.....

arc(x, y, radius, startAngle, endAngle, anticlockwise)

其中画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise（true逆时针）给定的方向（默认为顺时针）来生成。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas学习</title>
        <style>
            #mycanvas {
                border: 1px solid;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="300" height="300">
            你的浏览器不支持canvas，请升级版本！
        </canvas>
        <script>
            var canvas = document.querySelector("canvas");
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.arc(100, 100, 10, 0, Math.PI*2, true);
            ctx.moveTo(160, 100);
            ctx.arc(150, 100, 10, 0, Math.PI*2, true);
            ctx.moveTo(100, 150);
            ctx.arc(125, 150, 25, Math.PI, 0, false);
            ctx.moveTo(185, 120);
            ctx.arc(125,120, 60, 0, Math.PI*2, true)
            ctx.stroke();
        </script>
    </body>
</html>

将moveTo去掉会看到连起来的线，所以要通过moveTo重新选择落笔点，不然会连着下一处的开始点画：

所以画完一个圆就要拿起画笔来选择另外的点，不然就会连续的画。

　　想象一下在生活中画画，只要拿起了画笔，画下一处就要选择落笔点即moveTo( )，不拿起来就会一直一条线段画，差不多就是这个意思。

画太极图：

注意：弧度坐标与平时的反过来，PI/2在下面，2PI/3在上面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas学习</title>
        <style>
            #mycanvas {
                border: 1px solid;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="400" height="400" style="background-color: #EED2EE; ">
            你的浏览器不支持canvas，请升级版本！
        </canvas>
        <script>
            var canvas = document.querySelector("canvas");
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.arc(200, 200, 100, Math.PI*3/2, Math.PI/2, true);
            ctx.fill();

            ctx.fillStyle = "white";
            ctx.beginPath(); 
            ctx.arc(200, 200, 100, Math.PI/2, Math.PI*3/2, true);
            ctx.fill();

            // 上半圆
            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.arc(200, 150, 50, Math.PI*3/2, Math.PI/2,  true);
            ctx.fill();
            // 下半圆
            ctx.fillStyle = "black";
            ctx.beginPath();
            ctx.arc(200, 250, 50, Math.PI/2, Math.PI*3/2, true);
            ctx.fill();

            // 画两个小圆
            // 上小圆
            ctx.beginPath();
            ctx.arc(200, 150, 10, 0, Math.PI*2, true);
            ctx.fill();
            // 下小圆
            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.arc(200, 250, 10, 0, Math.PI*2, true);
            ctx.fill();
        </script>
    </body>
</html>

三、样式

颜色color：

两个属性：strokeStyle = 'color';

　　　　　fillStyle = 'color'.

上面画太极图中有用到过fillStyle。

未完待续...

原文地址：https://www.cnblogs.com/martin-tong/p/12782656.html