Canvas入门基础（一）：绘制基础形状

2018-06-19 14:26 更新

一、什么是canvas

<canvas>是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素。

<canvas> 元素不被一些老的浏览器所支持，但是所有的主流浏览器的近期版本都支持。

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <canvas> 元素. 注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 元素.

模板骨架

<canvas id="mycanvas" width="200" height="300">
   您的浏览器不支持canvas
</canvas>

<script>
    var cc=document.getElementById("mycanvas");
    var cxt=cc.getContext("2d");
</script>

<canvas> 标签只有两个属性—— width和height，这两个属性是可选的。当我们没有定义时，Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。但是，我们也可以使用HTML的高度和宽度属性来自定义尺寸。

你可以像给其他DOM元素一样给canvas添加样式；当开始时没有为canvas规定样式规则，其将会完全透明。

注意：由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素"canvas"，在这些浏览器上你应该总是能展示替代内容，如以上代码中的"您的浏览器不支持canvas"，或者你可以加一个img。当然，对于那些支持<canvas>的浏览器，它将会忽略在容器中包含的内容，并且只是正常渲染canvas。

当然，你也可以用代码去检测canvas的支持性

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

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // 支持
} else {
  //不支持
}

二、使用 JavaScript 来绘制图像

在真正学习绘制图像之前，我们有必要了解一下Canvas坐标。

Canvas坐标

canvas是一个二维网格，以左上角坐标为(0,0)

了解了canvas坐标后，我们开始绘制图像，可以分三步：

找到canvas元素
创建context对象

<canvas> 元素有一个做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。这里，我们采用CanvasRenderingContext2D。

3. 绘制你所需的图像

三、绘制矩形

HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。

canvas提供了三种方法绘制矩形：

绘制一个填充的矩形

fillRect( x ,y ,width, height)

绘制一个矩形的边框

strokeRect( x ,y ,width, height)

清除指定矩形区域，让清除部分完全透明

clearRect( x ,y ,width, height)

参数

x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。

width和height设置矩形的尺寸。

例子：

<script>
		var cc=document.getElementById("mycanvas");
		if(cc.getContext){
			var cxt=cc.getContext("2d");
			cxt.strokeRect(20,20,100,100);
			cxt.fillRect(40,40,50,50);
			cxt.clearRect(50,50,30,30);
		}
</script>

四、绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

需要创建路径起始点。
使用画图命令去画出路径。
把路径封闭。
一旦路径生成，就能通过描边或填充路径区域来渲染图形。

以下是所要用到的函数：

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

beginPath()

闭合路径之后图形绘制命令又重新指向到上下文中。

closePath()

这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

通过线条来绘制图形轮廓。

stroke()

通过填充路径的内容区域生成实心的图形。

fill()

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

移动笔触

将笔触移动到指定的坐标x以及y上

moveTo(x,y)

绘制一条从当前位置到指定x以及y位置的直线

lineTo(x,y)

例子：

cxt.beginPath();
cxt.moveTo(150,150);
cxt.lineTo(150,250);
cxt.lineTo(300,250);
cxt.stroke();
cxt.closePath();

cxt.beginPath();
cxt.moveTo(400,400);
cxt.lineTo(400,500);
cxt.lineTo(500,500);
cxt.fill();
cxt.closePath();

五、弧线

绘制圆弧或者圆，我们使用arc()方法

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

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

例子：

cxt.beginPath();
cxt.arc(70,70,50,0,Math.PI/2,true);
cxt.stroke();

cxt.beginPath();
cxt.arc(180,70,50,0,Math.PI/2,false);
cxt.stroke();

cxt.beginPath();
cxt.arc(300,70,50,0,Math.PI/2,true);
cxt.fill();

cxt.beginPath();
cxt.arc(400,70,50,0,Math.PI/2,false);
cxt.fill();

六、贝塞尔（bezier）以及二次贝塞尔

路径类型就是贝塞尔曲线。二次以及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。

绘制二次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点。

quadraticCurveTo(cp1x, cp1y, x, y)

绘制三次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

七、矩形

rect(x, y, width, height)

绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。

八、Path2D 对象

正如我们在前面例子中看到的，你可以使用一系列的路径和绘画命令来把对象“画”在画布上。为了简化代码和提高性能，Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。

Path2D() Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。

new Path2D();     // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(d);    // 从SVG建立Path对象

例子：

var path=new Path2D();
path.rect(120,120,50,50);
cxt.stroke(path);

Path2D.addPath(path [, transform]) 添加了一条路径到当前路径（可能添加了一个变换矩阵）

使用 SVG paths

新的Path2D API有另一个强大的特点，就是使用SVG path data来初始化canvas上的路径。这将使你获取路径时可以以SVG或canvas的方式来重用它们。

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

这条路径将先移动到点 (M10 10) 然后再水平移动80个单位 (h 80)，然后下移80个单位 (v 80)，接着左移80个单位 (h -80)，再回到起点处 (z)。

以上内容是否对您有帮助：

Canvas入门基础（二）：颜色、样式和阴影 →

写笔记

我要补充