HTML5 画布（Canvas）
<canvas> 用于在网页中绘制图形.
左侧的例子展示了使用canvas绘制的如下图形：
一个红色矩形
渐变矩形
多色矩形
多色文本.
什么是Canvas?
HTML5 <canvas>元素用于绘制图形，使用脚本绘制(通常是JavaScript).
<canvas>元素只是一个图形容器.你必须使用脚本语言绘制图形.
Canvas有几个常用方法分别是画图、boxes, circles, text, 和 adding images.
浏览器支持
IE 9+, 火狐, 欧鹏, 谷歌, 和苹果浏览器支持<canvas>.
注意: IE8及更早版本不支持<canvas>元素.
创建一个Canvas
画布在页面中是个矩形的区域, 由<canvas> 元素指定.
注意: 默认情况下,<canvas>元素无边框无内容.
如下:
注意: 在画布中必须指定一个id属性(在脚本中调用), 并且定义宽高属性.
提示: 在同一个页面中你可以有多个<canvas>元素.
使用样式（style）属性添加边框:
例子
style="border:1px solid #000000;">
</canvas>
亲自试一试 »
使用JavaScript在画布是绘图
在画布上绘图必须内嵌JavaScript脚本:
例子
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
亲自试一试 »
例子说明:
首选, 根据id找到<canvas> 元素:
然后，调用Then, call its getContext() method (you must pass the string "2d" to the getContext() method):
The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.
The next two lines draw a red rectangle:
ctx.fillRect(0,0,150,75);
The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).
The fillRect( x,y,width,height ) method draws a rectangle filled with the current fill style.
Canvas 坐标
canvas是一个二维网络.
画布左上角的坐标是 (0,0)
所以，上面的fillRect()的参数是 (0,0,150,75).
意思是说: 从左上角坐标 (0,0)开始画一个150x75 像素的矩形.
坐标例子
鼠标掠过下面矩形的可以查看x,y坐标:
Canvas - 路径（Paths）
在画布中画一个直线, 我们可以使用如下方法:
- moveTo( x,y ) 定义直线的起点
- lineTo( x,y ) 定义直线的终点
通常画直线，我们必须使用"ink" 中的方法,如： stroke().
例子
定义直线的起点坐标(0,0), 和终点坐标(200,100). 然后使用 stroke() 方法画直线:
JavaScript:
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
亲自试一试 »
在画布上画一个圆，我们使用如下方法:
- arc(x,y,r,start,stop)
画圆我们需要使用"ink" 中的方法,如：stroke() 或 fill().
例子
使用arc()方法创建一个园:
JavaScript:
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
亲自试一试 »
Canvas - 文本（Text）
在画布上添加文本, 最重要的属性和方法是:
- font - 定义文本的字体
- fillText( text,x,y ) - 在画布上添加文本"filled"
- strokeText( text,x,y ) - 在画布上绘制文本 (没有填充)
使用fillText()方法:
例子
Write a 30px high filled text on the canvas, using the font "Arial":
JavaScript:
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
亲自试一试 »
使用strokeText()方法:
例子
在画布上写一个30像素高的文本，使用"Arial"字体:
JavaScript:
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
亲自试一试 »
Canvas - 渐变（Gradients）
渐变可用来填充矩形、圆形、直线、文本等.画布上的形状不仅限于固定颜色.
有两种不同的渐变:
- createLinearGradient( x,y,x1,y1 ) - 创建一个线性渐变
- createRadialGradient( x,y,r,x1,y1,r1 ) - 创建一个径向/圆形梯度
一旦我们有了渐变对象, 我们必须添加两种或两种以上颜色.
addColorStop()指定颜色起止及梯度位置. 梯度位置可以在0到1之间.
使用渐变, 需要设置fillStyle或strokeStyle属性, 然后画图形，如矩形、文本或直线.
使用createLinearGradient()方法:
例子
创建一个线性渐变。用渐变填充矩形:
JavaScript:
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
亲自试一试 »
使用createRadialGradient()方法:
例子
Create a radial/circular gradient. Fill rectangle with the gradient:
JavaScript:
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
亲自试一试 »
Canvas - 图片（Images）
在画布上画一个图片, 我们需要使用如下方法:
- drawImage( 图片image,x坐标,y坐标 )
图像使用:
例子
画出图像到画布上:
JavaScript:
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
亲自试一试 »
HTML的<canvas>标签
| 标签 | 描述 |
|---|---|
| <canvas> | 用于绘制图形、动态,通过脚本绘制 (通常使用JavaScript) |
