一、什么是 canvas?
- HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成
- 可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像等
- Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）
- 默认情况下 <canvas> 元素没有边框和内容
- 可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。
- 一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
- 标签通常需要指定一个id属性 (脚本中经常引用)
- 可以在HTML页面中使用多个 <canvas> 元素
二、浏览器支持情况
浏览器支持
三、坐标系统
如图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角，坐标为（0,0），所有元素的位置都相对于原点定位。
图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素，坐标为（x,y）。
栅格系统.png
四、使用 JavaScript 来绘制图像
（一）绘制矩形
canvas提供了三种方法绘制矩形：
fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。
x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。
width和height设置矩形的尺寸。
image.png
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas=document.getElementById("cava1");
var ctx=canvas.getContext("2d");
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
draw();
</script>
fillRect()函数绘制了一个边长为100px的黑色正方形。clearRect()函数从正方形的中心开始擦除了一个60x60的正方形，接着strokeRect()在清除区域内生成一个50x50的正方形边框。
（二）绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤：
- 首先需要创建路径起始点。
- 然后使用画图命令去画出路径。
- 之后把路径封闭。
- 一旦路径生成，就能通过描边或填充路径区域来渲染图形。
要用到的函数：
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。
生成路径的步骤：
第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。
第二步就是调用函数指定绘制路径。
第三，就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
示例：绘制一个三角形
image.png
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas = document.getElementById("cava1");
var ctx = canvas.getContext("2d");
//绘制三角形
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
}
draw();
</script>
示例：圆弧
绘制圆弧或者圆，使用arc()方法。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
以（x,y）为圆心，以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
image.png
<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script>
function draw() {
var canvas = document.getElementById("cava1");
var ctx = canvas.getContext("2d");
//圆形
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
}
draw();
</script>
其它文章请访问：
网友评论