首先引用 MDN
上对于 canvas
的定义:
<canvas>
是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形。例如:画图,合成照片,创建动画甚至实时视频处理与渲染。
也就是说这是浏览器提供给我们的一个画布和丰富的接口,可以用来制作各种复杂的效果。<canvas>
元素创造了一个固定大小的画布,它公开了一个或多个渲染上下文。其可以用来绘制和处理被现实的页面。
这是 canvas 2d 的坐标,可以看到左上角为原点,横轴为x轴,纵轴为y轴。我们所有的canvas2d的功能实现都是在这个坐标系中。
基本用法
本文只简单介绍一下矩形、线段和圆弧的画法。
矩形
通过一个简单的例子来了解一下基本的API:
HTML:
<canvas id="canvas" style="height:100%"> |
JavaScript:
var canvas = document.getElementById('canvas'); |
页面上会如下显示:
首先获取到 canvas 元素,并通过 getContext(‘2d’) 获取到它的渲染上下文。
clearRect(x, y, width, height)
清空指定区域,如果需要做动画的话,每次重新渲染前都需要调用这个函数来清除前一帧的内容。
beginPath()
新建一条路径
fillStyle
用来设置要填充的颜色
ctx.fillRect(10, 10, 55, 50);
以x轴等于10,y轴等于10为起点,绘制一个宽55高50的矩形。
strokeRect(x,y,width,height)
跟fillRect不同的地方在于,strokeRect会绘制一个矩形的边框,如下:
线段
绘制一个三角形ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.closePath();
ctx.stroke();
moveTo(x,y)
定义一个起点,从这个点开始绘制
lineTo(x,y)
绘制一条从当前位置到指定x以及y位置的直线
closePath()
闭合当前路径,也可以用lineTo到起点来代替
storke()
根据已有路径的来绘制线段,也就是说如果不执行stroke(),那么画布上什么都没有。
圆弧
arc(x, y, radius, startAngle, endAngle, anticlockwise)
该方法有五个参数: x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时,是逆时针方向,否则顺时针方向。
看个直观的例子:ctx.beginPath();
truectx.arc(75, 75, 50, 0, Math.PI * 2, true);
truectx.moveTo(110, 75);
truectx.arc(75, 75, 35, 0, Math.PI, false);
truectx.moveTo(65, 65);
truectx.arc(60, 65, 5, 0, Math.PI * 2, true);
truectx.moveTo(95, 65);
truectx.arc(90, 65, 5, 0, Math.PI * 2, true);
truectx.stroke();
truectx.clearRect(0, 0, 500, 500);
truefor (var i = 0; i < 4; i++) {
truetruefor (var j = 0; j < 3; j++) {
truetruetruectx.beginPath();
truetruetruevar x = 20 + j * 40;
truetruetruevar y = 20 + i * 40;
truetruetruevar radisu = 20;
truetruetruevar startAngle = 0;
truetruetruevar endAngle = Math.PI + (Math.PI * j) / 2;
truetruetruevar anticlockwise = i % 2 == 0 ? true : false;
truetruetruectx.arc(x, y, radisu, startAngle, endAngle, anticlockwise);
truetruetrueif (i > 1) {
truetruetruetruectx.fill();
truetruetrue} else {
truetruetruetruectx.stroke();
truetruetrue}
truetrue}
true}
通过这个例子可以看清楚的看到 fill 和 stroke 这个两个函数的区别,前者渲染边框,后者填充整个指定区域。同时可以区分,anticlockwise 分别 true 和 false 时渲染的机制,前者为逆时针,后者为顺时针。
# 总结
仅仅通过这三个基础的用法,就可以制作出很多漂亮的动画了。我这里做了一个简单运动的小球,同时做了边界判定。
参考文章: MDN-Canvas