【HTML】【学习】 2、Canvas学习笔记【上】_H5之家

【HTML】【学习】 2、Canvas学习笔记【上】

Canvas是HTML新增的开发跨平台动画和游戏的标准解决方案，能够实现对图像和视频进行像素级操作。

一、在页面中添加canvas元素

就像添加一个普通div一样，canvas的添加方式为:

<canvas id = "myCanvas" width = "200px" height = "100px">不支持时显示的部分</canvas>

可以用对div添加样式的方法使用CSS对Canvas添加样式

二、使用Canvas绘制图形

Canvas本身并不能绘图，需使用JavaScript来完成绘图。

1、绘制一个简单的矩形:

<canvas \
>您的浏览器不支持Canvas元素！</canvas>

<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.fillStyle = "#FF00FF";
context.fillRect(100,50,200,100);
</script>

运行后在网页上将看到在Canvas框中绘制了一个紫红色的矩形

代码解释 :

首先，使用getElementById("myCanvas")来找到Canvas元素

然后，调用Canvas的getContext("2d")方法来创建一个图形对象，同时使用2d环境绘制

最后，通过改变这个图形对象的属性的值来完成绘图。

2、借助坐标绘制图形

在上文中使用了坐标，通过使用坐标，我们可以绘制精确的图形

<canvas\
>你的浏览器不支持canvas元素！</canvas>
<script>
var l = document.getElementById("lineCanvas");
var line = l.getContext("2d");
line.moveTo(0,0);
line.lineTo(200,200);
line.lineTo(400,0);
line.stroke();
</script>

以上代码运行后在一个400×300的矩形框中出现了一条折线

代码解释：

同1所示，找到Canvas元素，创建一个图形对象。

调用这个图形对象的moveTo()方法，定位图形起始位置在(0,0)

调用lineTo()方法，为对象创建2条直线（如果前面没有用moveTo(),则会继续当前的坐标）

调用stroke()方法，绘制出这2条直线

在1的代码中，可以使用图形对象的strokeStyle和strokeRect方法为绘制轮廓

context.strokeStyle = "#00";
context.strokeRect(100,50,200,100);

以上代码为矩形添加了黑色的轮廓。

3、绘制圆形

使用beginPath、arc、closePath和fill方法绘制圆形

<canvas>您的浏览器不支持canvas</canvas>
<script>
var r = document.getElementById("printRoundCanvas");
var oRound = r.getContext("2d");
oRound.fillStyle = "#FF00FF";
oRound.beginPath();
oRound.arc(200,150,100,0,Math.PI*2,true);
oRound.closePath();
oRound.fill();
</script>

以上代码运行后在一个400×300的矩形中绘制了一张日本国旗

圆形的圆心位于坐标（200，150）点，半径为100px

代码解释：

获取元素，创建对象。。。在此不再赘述

canvas使用绘制路径并填充的方式绘制圆形，beginPath()方法开始绘制路径

closePath()方法结束绘制路径

arc()方法用于绘制圆形，它接受6个参数，分别是

描述圆形的坐标x,y

圆的半径radius

开始和结束的角度，用弧度制表示，绘制一个完整的圆是从0到2π（360度）

是否按逆时针绘制 anticlockwise

了解到这些以后，再加上上面学习到的知识，可以绘制各种我们想要的圆形

修改arc()的参数，我们可以得到以上图形，现在，我们来具体研究一下canvas绘制圆形的机制
如上图所示，在为路径设置了一定的绘制角度后，关闭路劲并填充得到了一块被切了一刀的圆
线的图像是基于点移动产生的轨迹，圆的图像是基于线（路径）的移动产生的轨迹，
最后关闭路径时又会自动生成一块连接开始路径和结束路径的三角形

要产生扇形，可以在绘制圆形前使用moveTo()方法，将图形对象的开始点设置为圆形。

产生右边3个圆形的代码：

oRound2.beginPath();
oRound2.moveTo(300,100);
oRound2.arc(300,100,66,Math.PI*(-1/2),Math.PI*2,true);
oRound2.closePath();
oRound2.fill();

oRound3.beginPath();
oRound3.moveTo(500,100);
oRound3.arc(500,100,66,0, Math.PI*0.5,true);
oRound3.closePath();
oRound3.fill();

oRound4.beginPath();
oRound4.moveTo(700,100);
oRound4.arc(700,100,66,Math.PI*0.25, Math.PI*2,true);
oRound4.closePath();
oRound4.fill();

4、清空画布

使用图形对象的clearRect()方法来清除画布

clearRect接受4个参数，描述被清除的区域的坐标

5、绘制贝塞尔曲线

使用canvas描绘二次贝塞尔曲线：

context.quadraticCurveTo(cp1x,cp1y,x,y);

cp1x,cp1y是控制点的坐标 x,y是终点坐标

绘制一条控制点在（430，160）的二次贝塞尔曲线：

var curve = document.getElementById("printCurveCanvas2");
var oCurve = curve.getContext("2d");
oCurve.strokeStyle="#FF0000";
oCurve.moveTo(0,400);
oCurve.quadraticCurveTo(460,130,600,400);
oCurve.stroke();

代码解释：

moveTo()方法设定曲线起始点为（0，400）

quardraticCurve()方法绘制曲线，终点为（600，400）

绘制三次贝塞尔曲线
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

三次贝塞尔曲线有2个控制点

在上图的基础上画一条控制点在(200,200)和(600,200)，起始位置在(200,0),
结束位置在(600,0)的二次贝塞尔曲线

以上内容为本人学习笔记，如有错误，恳请大神指出，本人感激不尽。

本文出自 “wanghaz的学习” 博客，请务必保留此出处