canvas系列一：canvas基础篇

一、什么是canvas

canvas是HTML5提供的一个用于展示绘图效果的标签，原意画布、帆布，在HTML页面中用于展示绘图效果。

二、canvas的应用领域

canvas的使用领域很多:

游戏
可视化数据(重点)
banner 广告
多媒体
未来（模拟仿真、远程操作、图形编辑）

三、canvas 的基本用法

基本语法<canvas></canvas>

使用canvas标签，即可在页面中开辟一格区域，可以设置其width和height设置该区域的尺寸。
默认canvas的宽高为 300和150。
不要使用CSS的方式设置宽高，应该使用HTML属性。如果使用css样式给canvas设置尺寸，会有拉伸的效果。
如果浏览器不支持canvas标签，那么就会将其解析为div标签，因此常在canvas中嵌入文本，以提示用户浏览器的能力。
canvas的兼容性非常强，只要支持该标签的，基本功能都一样，因此不用考虑兼容性问题。
canvas本身不能绘图，是使用JavaScript来完成绘图，canvas对象提供了各种绘图用的api。

四、基本的绘图步骤

获得canvas画布对象。
调用getContext(type)方法，该方法用于绘制上下文工具，type是画图工具类型（type取值如果是webgl代表获取三维绘图工具，取值如果是2d代表二维绘图工具），如果取值是’2d’该方法返回CanvasRenderingContext2D类型的对象，如果取值是’webgl’ 返回WebGLRenderingContext类型的对象，该对象提供基本的绘图命令，使用该对象提供的方法进行绘图。
基本绘图命令
1）设置绘图起点：context对象.moveTo( x, y )
2）设置直线到的位置：context对象.lineTo( x, y )
3）描边绘制：context对象.stroke()，该方法用于连线，将绘制的所有点按照指定顺序连接起来。
4）填充绘制：context对象.fill()，该方法会按照描绘的点的路径来填充图形，默认是黑色。
5）闭合路径：context对象.closePath()，该方法可以将最后一个描点与最开始的描点自动连接起来。

五、canvas初体验Demo

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas初体验</title>
    <style type="text/css">
        #canvas{
            border:2px solid orange;
        }
    </style>
</head>
<body>
    <!--首先写一个canvas标签-->
    <canvas id="canvas" width="500" height="300"></canvas>
    <script type="text/javascript">
        //第一步、获取canvas对象
        var canvas = document.querySelector('#canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //第三步、绘制落笔点
        ctx.moveTo(0,200);
        //第四步、告诉画图工具要画到哪里
        ctx.lineTo(200,100);
        //第五步、描边
        ctx.stroke();

    </script>
</body>
</html>

六、注意事项

需要绘图就需要有canvas标签，该标签用于展示图像。
canvas的宽高不要使用CSS来设置，会有拉伸的问题，应该直接使用属性设置。
canvas只是展示图像的标签，没有绘图的能力，需要使用canvas的上下文工具来实现绘图。
需要绘图，首先必须设置绘图的起点，刚开始如果不设置moveTo就没有起点。
lineTo点会被保存为这一笔到下一笔的起点。如果要重新开始绘制一条就要重新moveTo，否则会从lineTo的点开始绘制。

小结：绘图先要获得上下文, 即绘图工具；绘图需要设置开始的坐标；绘图是先描点, 然后一个一个依次连线；依次绘图只能绘制单一样式( 色彩等 )。

七、补充练习（请使用上面学习的内容绘制以下基本图形）

绘制基本图形1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制基本图形练习</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
        //第一步、获取canvas画布对象
        var canvas = document.querySelector('#canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //第三步、设置绘制起点
        ctx.moveTo(0,0);
        //第四步、继续绘制下一个点
        ctx.lineTo(100,0);
        ctx.lineTo(100,100);
        ctx.lineTo(0,100);
        //第五步、闭合路径、描边
        ctx.closePath();
        ctx.stroke();
    </script>
</body>
</html>

绘制基本图形2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制基本图形练习</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
        //第一步、获取canvas画布对象
        var canvas = document.querySelector('#canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //第三步、设置绘制起点
        ctx.moveTo(0,0);
        //第四步、继续绘制下一个点
        ctx.lineTo(0,100);
        ctx.lineTo(100,100);
        //第五步、闭合路径、描边
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    </script>
</body>
</html>

八、路径

1、路径就是一次绘图，在canvas中使用各种方法描点实际上描述的是路径( path )，在canvas绘图中, 所有描述的东西都是路径，只有最后填充或描边的时候才会显示出效果。每一个路径都是一个状态。
2、举例：使用油漆刷墙面
1）首先打底色，绝对不会一次性使用多个色彩
2）一定是先画完某一个色彩再考虑另一个色彩
3）除非需要自己创作才会考虑墙面绘画
路径就好比一桶油漆和一把刷子, 一次性描点绘制，如果重新更换油漆, 那么是绘制另一个区域。
3、如果需要开启新的绘制, 那么使用beginPath() 方法。
路径中包含，当前画笔设置的绘制方式及各种绘图的样式，当想要换种绘制方式或者样式时，就要重新开辟一个路径，否则会对之前绘制的内容产生影响。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>路径</title>
</head>
<body>
    <canvas id="canvas" width="1000" height="1000">
        你的浏览器还不支持canvas，赶紧换一个吧。
    </canvas>
    <script>
        //第一步、获取canvas对象
        var canvas = document.querySelector('#canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //第三步、设置绘制起点
        ctx.moveTo(0,0);
        //设置线宽
        ctx.lineWidth = 10;
        //第四步、会直接下来的点
        ctx.lineTo(100,0);
        ctx.lineTo(100,100);
        ctx.lineTo(0,100);
        //第五步、闭合路径、描边
        ctx.closePath();
        ctx.stroke();

        //新开辟一个路径
        ctx.beginPath();
        ctx.moveTo(0,200);
        //设置线宽
        ctx.lineWidth = 2;
        ctx.lineTo(100,200);
        ctx.lineTo(100,300);
        ctx.lineTo(0,300);
        ctx.closePath();
        ctx.stroke();
    </script>
</body>
</html>

需要注意的是：beginPath之后，样式相关的所有内容，不会恢复到默认值，想要恢复就得手动的进行设置。

九、非零环绕原则

非零环绕原则

非零环绕原则，来判断哪块区域是里面，哪块区域是外面。

   首先，给图形确定一条路径，只要“一笔画”并且“不走重复路线”就可以了。如图，标出的是其中的一种路径方向。
先假定路径的正方向为1（其实为-1啥的也都可以，正负方向互为相反数，不是0就行），那么反方向就是其相反数-1。
然后，在子路径 切割的几块区域内的任意一点各取一条方向任意的射线，这里只取了三个区域的射线为例，来判断这
三块区域是“里面”还是“外面”。

 S1中引出的射线L1，与S1的子路径的正方向相交，那么给计数器+1，结果为+1，在外面。
 S2中引出的射线L2，与两条子路径的正方向相交，计数器+2，结果为+2，在外面。 
 S3中引出的射线L3，与两条子路径相交，但是其中有一条的反方向，计数器+1-1，结果为0，在里面。 
 只要结果不为0，该射线所在的区域就在外面。

十、使用非零环绕原则绘制以下图形并分析思路

非零环绕原则

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>非零环绕原则</title>
</head>
<body>
    <canvas id="canvas" width="600" height="400">
        你的浏览器还不支持canvas，赶紧换一个吧
    </canvas>
    <script type="text/javascript">
        //第一步、获取canvas对象
        var canvas = document.querySelector('#canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //第三步、设置落笔点
        ctx.moveTo(0,0);
        //继续绘制
        ctx.lineTo(500,0);
        ctx.lineTo(500,300);
        ctx.lineTo(0,300);
        ctx.closePath();

        ctx.moveTo(400,100);
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);
        ctx.lineTo(400,200);
        ctx.closePath();

        ctx.stroke();
        ctx.fill();
    </script>
</body>
</html>

十一、线型相关属性

设置描边与填充不一定只能使用黑色的细线. 可以利用一些属性设置其效果。
context对象.lineWidth：设置线宽
context对象.lineCap：设置线末端类型
context对象.lineJoin：设置相交线的拐点
context对象.getLineDash()：获得线段样式数组
context对象.setLineDash()：设置线段样式
context对象.lineDashOffset：绘制线段偏移量

【1】设置线宽

语法:
   context对象.lineWidth = number

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置线宽</title>
</head>
<body>
    <canvas id="canvas">
        你的浏览器还不支持canvas，赶紧换一个吧
    </canvas>
    <script type="text/javascript">
        //第一步、获取canvas对象
        var canvas = document.querySelector("#canvas");
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //设置线宽
        ctx.lineWidth = 20;
        //第三步、绘制起点
        ctx.moveTo(0,0);
        //继续绘制
        ctx.lineTo(50,0);
        ctx.stroke();

        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.moveTo(0,100);
        ctx.lineTo(100,100);
        ctx.stroke();
    </script>
</body>
</html>

【2】设置线末端类型

语法:
   context对象.lineCap = value

描述：
设置线型末端的样式, 可取值为: ‘butt’( 默认 ), ‘round’, ‘square’。
‘butt’ 表示两端使用方形结束。
‘round’ 表示两端使用圆角结束。
‘square’ 表示突出的圆角结束。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置线末端类型</title>
</head>
<body>
    <canvas id="canvas" width="700" height="700">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
    <script type="text/javascript">
        //第一步、获取canvas对象
        var canvas = document.getElementById('canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //第三步、设置线宽
        ctx.lineWidth = 10;
        //第四步、开始绘制
        ctx.moveTo(0,0);
        ctx.lineTo(100,0);
        ctx.stroke();

        ctx.beginPath();
        ctx.lineWidth = 20;
        ctx.lineCap = 'round';
        ctx.moveTo(50,100);
        ctx.lineTo(150,100);
        ctx.stroke();

        ctx.beginPath();
        ctx.lineWidth = 50;
        ctx.lineCap = 'square';
        ctx.moveTo(150,200);
        ctx.lineTo(250,200);
        ctx.stroke();
    </script>
</body>
</html>

【3】设置相交线的拐点

语法:
   context对象.lineJoin = value

描述：
设置两条直线的拐点描述方式. 可以取值 ‘round’, ‘bevel’, ‘miter’(默认)
‘round’ 使用圆角连接。
‘bevel’ 使用平切连接。
‘miter’ 使用直角转。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置相交线的拐点</title>
</head>
<body>
    <canvas id="canvas" width="700" height="700">你的浏览器还不支持canvas，赶紧换一个吧!</canvas>
    <script type="text/javascript">
        //第一步、获取canvas对象
        var canvas = document.querySelector('#canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //第三步、设置线宽、线型、相交线的拐点
        ctx.lineWidth = 10;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        //第四步、开始绘制
        ctx.moveTo(50,50);
        ctx.lineTo(150,150);
        ctx.lineTo(250,50);
        ctx.stroke();
    </script>
</body>
</html>

【4】设置填充与描边样式

描边样式语法:
   context对象.strokeStyle = value
填充样式语法:
   context对象.fillStyle = value

描述：
strokeStyle 可以设置描边颜色，与 CSS 的语法一样。
fillStyle 设置填充颜色，与 CSS 语法一样。
这两个属性还可以设置渐变对象。

【5】设置虚线样式

语法:
   context对象.lineDashOffset = number
   context对象.getLineDash([])
   context对象.setLineDash([])

描述：
lineDashOffset用于设置开始绘制虚线的偏移量，数字的正负表示左右偏移。
getLineDash() 与 setLineDash() 方法使用数组描述实线与虚线的长度。

canvas系列一：canvas基础篇

canvas系列一：canvas基础篇

一、什么是canvas

二、canvas的应用领域

三、canvas 的基本用法

四、基本的绘图步骤

五、canvas初体验Demo

六、注意事项

七、补充练习（请使用上面学习的内容绘制以下基本图形）

八、路径

九、非零环绕原则

十、使用非零环绕原则绘制以下图形并分析思路

十一、线型相关属性

【1】设置线宽

【2】设置线末端类型

【3】设置相交线的拐点

【4】设置填充与描边样式

【5】设置虚线样式

猜你喜欢