本文同步于个人博客:https://zhoushuo.me/blog/2018/03/05/html5-canvas/
<canvas>
是HTML5新增的元素,能够用于绘制图形,制造照片,建立动画。<canvas>
标签只是图形容器,它没有自身的行动,必需运用脚原本绘制图形。
建立一个canvas
<canvas id="mycanvas" width="300" height="300"></canvas>
<canvas>
标签只要两个属性—— width
和height
,当没有设置宽度和高度的时刻,<canvas>
的默许大小为300px×150px。须要注重的是,假如运用css
来定义<canvas>
的大小,在绘制时图象会伸缩以顺应它的框架尺寸:假如CSS的尺寸与初始画布的比例不一致,它会涌现歪曲。
衬着上下文
<canvas>
元素自身是没有画图才能的。一切的绘制事情必需在 JavaScript 内部完成。
<canvas>
制造了一个牢固大小的画布,它公开了一个或多个衬着上下文,其能够用来绘制和处置惩罚要展现的内容。
canvas起初是空缺的,起首须要找到衬着上下文,然后在它的上面绘制。
var canvas=document.getElementById("mycanvas");
var ctx = canvas.getContext('2d');
<canvas>
有一个叫做 getContext()
的要领,这个要领是用来取得衬着上下文和它的绘画功用。getContext()
只要一个参数,就是上下文的花样。
搜检浏览器兼容性
最新版的 FireFox,Safari,Chrome 和 Opera 都支撑 HTML5 canvas
,然则 IE8及以下都不支撑canvas
。下面的代码用于检测浏览器的是不是支撑canvas
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
canvas 坐标
在绘制图形之前,我们还应该先相识一下canvas
中的坐标。canvas
默许被网格所掩盖。一般来讲网格中的一个单元相当于canvas
元素中的一像素。栅格的出发点为左上角(坐标为(0,0))。一切元素的位置都相对于原点定位。
绘制 canvas 图形
好的,接下来我们就最先相识怎样运用Canvas的API绘制基础图形了 。
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle="red";
ctx.fillRect(0,0,100,100);
}
上面的两行代码绘制一个赤色的矩形:
设置fillStyle
属性能够是css
色彩,渐变,或图案。fillStyle
默许设置是#000000
(黑色)。
fillRect(x,y,width,height)
要领定义了矩形当前的添补体式格局,x
与y
指定了在canvas
画布上所绘制的矩形的左上角(相对于原点)的坐标。width
和height
设置矩形的尺寸。
canvas 途径
途径是经由过程线段或曲线相连构成的差别外形的点的鸠合。一个途径,以至一个子途径,都是闭合的。运用途径绘制图形须要一些分外的步骤。
以下是所要用到的要领:
函数 | 形貌 |
---|---|
strokeStyle | 用于设置画笔绘制途径的色彩、渐变和形式 |
lineWidth | 定义绘制线条的宽度 |
beginPath() | 最先一个新的绘制途径 |
moveTo(x,y) | 挪动画笔到指定的坐标点(x,y),该点就是新的子途径的肇端点 |
lineTo(x,y) | 运用直线边接当前端点和指定的坐标点(x,y) |
stroke() | 沿着绘制途径的坐标点递次绘制直线 |
closePath() | 假如当前的绘制途径是翻开的,则封闭掉该绘制途径 |
这里须要注重的是,当你挪用fill()函数时,一切没有闭合的外形都邑自动闭合,所以你不须要挪用closePath()函数。然则挪用stroke()时不会自动闭合。
下面的代码绘制了一个三角形:
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
}
canvas 圆弧
绘制途径我们能够运用arc()
要领。该要领有六个参数:x,y
为绘制圆弧地点圆上的圆心坐标。radius
为半径。startAngle
以及endAngle
参数用弧度定义了最先以及完毕的弧度。这些都是以x轴为基准。参数anticlockwise
为一个布尔值。为true
时,是逆时针方向,不然顺时针方向。
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
注重:arc()函数中的角度单元是弧度,不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
canvas 文本
canvas 供应了两种要领来衬着文本:
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置添补指定的文本,绘制的最大宽度是可选的。
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的。
文本被添补体式格局:
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
文本边框备绘制体式格局:
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Arial";
ctx.strkeText("Hello World",10,50);
canvas 图象
引入图象到canvas
里须要以下两步基础操纵:
- 猎取一个指向
HTMLImageElement
的对象或许另一个canvas
元素的援用作为源,也能够经由过程供应一个URL的体式格局来运用图片。 - 运用
drawImage()
函数将图片绘制到画布上。
猎取图片和绘制图片,下面只展现最简朴的一种:
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var img=document.getElementById("img");
ctx.drawImage(img,10,10);
drawImage
有三个参数:drawImage(image, x, y)
。个中image
是image
或许 canvas
对象,x
和y
是其在目的canvas
里的肇端坐标。