如何使用Canvas及动画实现

如何使用Canvas及其动画实现

什么是Canvas?

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，而且能够操做图像内容，基本上它是一个能够用JavaScript操做的位图（bitmap）。

Canvas 对象表示一个 HTML 画布元素–。它没有本身的行为，可是定义了一个 API 支持脚本化客户端绘图操做。

定义和用法

首先，在HTML元素中定义一个canvas标签

<canvas id="tutorial" width="150" height="150"></canvas>

获取CANVAS对象及渲染上下文

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

基本形状

fillRect(x, y, width, height)
绘制一个填充的矩形

strokeRect(x, y, width, height)
绘制一个矩形的边框

clearRect(x, y, width, height)
清除指定矩形区域，让清除部分彻底透明。

function draw() { 
 
  
 var canvas = document.getElementById('canvas');
 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 ctx.fillRect(25,25,100,100);
 ctx.clearRect(45,45,60,60);
 ctx.strokeRect(50,50,50,50);
 }
}

绘制路径

1. 首先，你须要建立路径起始点。
2. 而后你使用画图命令去画出路径。
3. 以后你把路径封闭。
4. 一旦路径生成，你就能经过描边或填充路径区域来渲染图形。

经常使用命令

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

closePath()
闭合路径以后图形绘制命令又从新指向到上下文中。

stroke()
经过线条来绘制图形轮廓。

fill()
经过填充路径的内容区域生成实心的图形。

移动笔触

一个很是有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你能够想象一下在纸上做业，一支钢笔或者铅笔的笔尖从一个点到另外一个点的移动过程。

moveTo(x, y)
将笔触移动到指定的坐标x以及y上。

function draw() { 
 
  
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
    ctx.stroke();
 }
}

更多详细的例子请参考MDN文档
MDN–使用Canvas绘制图形

常见错误

图形失真

不要使用style属性来设置width和height

本质上，canvas画布等同于一张位图，它拥有本身的width和height属性，这至关于设置了分辨率

<canvas width=100 height=100></canvas>

这至关于一张100*100分辨率的图片，若是咱们使用style属性强行将其方法

<canvas width=100 height=100 style="width:1000px;height:1000px"></canvas>

这样图片就会变得及其的模糊。

再强调一次：

不要使用style来设置canvas的宽度和高度！！！

图形连笔

连笔是因为在绘制须要断开连线的时候没有移动笔触致使。使用moveTo()函数来避免这个问题

动画没法清空画布

有的时候咱们发现明明已经使用了clearRect()函数来清空画布，可是仍是无效。

这里的小细节不容易发现，在绘制路径开始以前一般须要加上beginPath()方法。不然使用路径的动画没法清空画布。