8. 绘制矩形
矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形有关的方法包
括：fillRect(), strokeRect()和clearRect()
这三个方法都能够接收四个参数：矩形的x坐标，矩形的y坐标，矩形宽度和矩形高
度。单位都是像素。
安博中程在线
varcontext=document.getElementById("canvas-area").getContext("2d");
context.fillRect(x,y,width,height);
context.strokeRect(x,y,width,height);
context.clearRect(x,y,width,height);
JAVASCRIPT
8/45
11. clearRect()
clearRect() 方法用于清除画布上的矩形区域。通过绘制形状然后再清除指定的区域，
就可以生成有意思的效果，比如把某个形状切掉一块。
安博中程在线
//绘制红色矩形
clearrect_context.fillStyle="#ff0000";
clearrect_context.fillRect(50,25,200,100);
//绘制半透明的蓝色矩形
clearrect_context.fillStyle="rgba(0,0,255,0.5)";
clearrect_context.fillRect(150,75,200,100);
//在两个矩形重叠的区域清除掉一个小矩形
clearrect_context.clearRect(170,95,20,20)；
JAVASCRIPT
11/45
12. 绘制路径
2D绘制上下文支持很多在画布上绘制路径的方法，通过路径可以创造出复杂的形状和
线条。
要绘制路径首先必须调用beginPath() 方法， 表示要开始绘制新路径，然后再调用相
应的绘制路径方法。
安博中程在线
moveTo(x, y): 将绘图游标移动到(x,y), 不画线。
lineTo(x, y): 从上一点绘制一条直线，到(x,y)为止。
arc(x, y, radius, startAngle, endAngle, counterlockwise): 以(x, y)为圆心绘制一条
弧线，弧线半径为radius, 起始和结束的角度分别为startAngle和endAngle。最后
一个参数表示startAngle和endAngle是否按逆时针计算，值为false表示按顺时针方
向计算。
arcTo(x1, y1, x2, y2, radius): 表示从上一点开始绘制弧线，到(x2,y2)为止，并且以
给定的半径穿过(x1,y1)。
·
·
·
·
12/45
13. 安博中程在线
//开始路径
pathcanvas_context.beginPath();
//绘制外圆
pathcanvas_context.arc(100,100,75,0,2*Math.PI,false);
//绘制内圆
pathcanvas_context.moveTo(170,100);
pathcanvas_context.arc(100,100,70,0,2*Math.PI,false);
//绘制分针
pathcanvas_context.moveTo(100,100);
pathcanvas_context.lineTo(100,35);
//绘制时针
pathcanvas_context.moveTo(100,100);
pathcanvas_context.lineTo(55,100);
//描边路径
pathcanvas_context.stroke();
JAVASCRIPT
13/45
15. 绘制文本
模拟了在网页中正常显示文本，fillText()方法的三个主要参数：要绘制的字符串，x坐
标和y坐标。
fillText以下面三个属性为基础：
安博中程在线
context.font="bold12pxsans-serif";
context.textAlign="right";
context.textBaseline="bottom";
context.fillText("x",248,43);
context.fillText("y",58,165);
JAVASCRIPT
font: 可以是CSS字体规则中的任何值。
textAlign：控制文本的对齐方式（和CSS的text-align不完全相同）。start, end,
left, right和center。
textBaseline: 控制文本相对于起点的位置。可以取值：top, hanging, middle,
alphabetic, ideographic和bottom。
·
·
·
15/45
18. 变换 - translate
在前面绘制秒针的例子中，如果我们把原点变换成表盘的中心，那么再绘制表针就容
易多了。
安博中程在线
context.beginPath();
context.arc(100,100,75,0,2*Math.PI,false);
context.moveTo(170,100);
context.arc(100,100,70,0,2*Math.PI,false);
//变换原点
context.translate(100,100);
context.moveTo(0,0);
context.lineTo(0,-65);
context.moveTo(0,0);
context.lineTo(-40,0);
context.stroke();
JAVASCRIPT
18/45
20. 颜色渐变
渐变是两种或者更多颜色的平滑过渡。canvas的绘图上下文支持两种类型的渐变：
安博中程在线
createLinearGradient(x0, y0, x1, y1)沿着直线从(x0, y0)至(x1, y1)绘制渐变。
createRadiaGradient(x0, y0, r0, x1, y1, r1)沿着两个圆之间的锥面绘制渐变。前三
个参数代表开始的圆，圆心是(x0, y0)，半径是r0; 最后三个参数代表结束的圆。
·
·
varmy_gradient=context.createLinearGradient(0,0,500,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
context.fillStyle=my_gradient;
context.fillRect(0,0,500,300);
JAVASCRIPT
20/45
23. 绘制图像
使用drawImage()可以把一幅图像绘制到画布上，根据期望的最终结果的不同，
drawImage()提供了三种绘制图片的方法：
安博中程在线
drawImage( image, dx, dy )接受一个图片，并将之画到canvas中。给出的坐标(dx,
dy)代表图片的左上角。
drawImage( image, dx, dy, dw, dh )接受一个图片，将其缩放为宽度dw，高度
dh，然后把它画到canvas上的(dx, dy)位置。并将之画到canvas中。
drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh )接受一个图片，通过参数( sx,
sy, sw, sh )指定图片的剪裁的范围，缩放到(dw, dh)的大小， 最后把它画到canvas
上的(dx, dy)位置。
·
·
·
varandroid=newImage();
android.src="images/android.png";
android.onload=function(){
for(varx=0,y=0;x<800&y<500;x+=50,y+=30){
context.drawImage(android,x,y,100,117);
}
}
JAVASCRIPT
23/45
35. 主要属性
属性 数值类型 说明
autoplay 布尔值 取得或设置autoplay标志
controls 布尔值 取得或者设置controls属性，用于隐藏或者显示浏览器内置的控件
duration 浮点数 媒体的总播放时间（秒数）
ended 布尔值 表示媒体是否播放完成
muted 布尔值 取得或设置媒体文件是否静音
paused 布尔值 表示播放器是否暂停
readyState 布尔值 表示媒体文件是否已经就绪
volume 浮点数 取得或设置当前音量
安博中程在线 35/45
37. 简单显示和控制
安博中程在线
window.onload = function(){
var player = document.getElementById("player");
var btn = document.getElementById("video-btn");
var curtime = document.getElementById("curtime");
var duration = document.getElementById("duration");
duration.innerHTML = player.duration;
EventUtil.addHandler(btn, "click", function(event){
if (player.paused){
player.play();
btn.value = "Pause";
} else {
player.pause();
btn.value = "Play";
}
});
setInterval(function(){
curtime.innerHTML = player.currentTime;
}, 250);
};
HTML
37/45
43. RGraph简单易用
安博中程在线
<scripttype="text/javascript"src="../libraries/RGraph.common.core.js"></script>
<scripttype="text/javascript"src="../libraries/RGraph.bar.js"></script>
...
<canvasid="cvs"width="600"height="250">[Nocanvassupport]</canvas>
<script>
window .onload=function()
{
varbar=newRGraph.Bar('cvs',[5,4,1,6,8,5,3]);
bar .Set('chart.labels',['Monday','Tuesday','Wednesday','Thursda
bar .Draw();
}
</script>
JAVASCRIPT
43/45
44. 扩展阅读
安博中程在线
RGraph 图表库
W3C: HTML Canvas 2D Context
Wikipedia: Canvas element
W3C Spec: Audio Element
W3C Spec: Video Element
W3C Spec: Media Elements
WhatWG: Timed Track API
Mozilla Wiki: Audio Data API
·
·
·
·
·
·
·
·
44/45
45. <Thank you!>
Feel free to contact me if you have any question.
微博 @范圣刚
博客 www.tfan.org
github github.com/princetoad
