最后的API
橡皮擦clearRect()
之前一直教大家怎么绘图,各种画笔各种样式,却没有教过童鞋们使用橡皮擦。Canvas 提供了clearRect()
方法,就是清空指定矩形上的画布上的像素。它接受四个参数,和其他绘制矩形的方法一样——context.clearRect(x,y,w,h)
。
下面,我们把之前新画布(实例 9-1)上的空白矩形给擦了吧!让整个页面显示出完整的背景图片。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>clearRect()</title>
<style>
body { background: url("./images/bg2.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的浏览器居然不支持Canvas?!赶快换一个吧!!
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
//清空画布
context.clearRect(0,0,canvas.width,canvas.height);
};
</script>
</body>
</html>
运行结果:
橡皮擦就是这么简单~
点泡泡小游戏
这里通过一个小游戏介绍一个交互性很强的API——isPointInPath()
。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>点泡泡</title>
<style>
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的浏览器居然不支持Canvas?!赶快换一个吧!!
</canvas>
</div>
<script>
var balls = [];
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
window.onload = function(){
canvas.width = 800;
canvas.height = 600;
for(var i=0; i<50; i++){
var aBall = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: Math.random() * 50 + 20
};
balls[i] = aBall;
}
draw();
canvas.addEventListener("mousemove",detect);
};
function draw(){
for(var i=0; i<balls.length; i++){
context.beginPath();
context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI *2);
context.globalAlpha = 0.5;
var R = Math.floor(Math.random() * 255);
var G = Math.floor(Math.random() * 255);
var B = Math.floor(Math.random() * 255);
context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
context.fill();
}
}
function detect(){
var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getBoundingClientRect().top;
for(var i=0; i<balls.length; i++){
context.beginPath();
context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2);
if(context.isPointInPath(x,y)){
context.fillStyle = "rgba(255,255,255,0.1)";
context.fill();
}
}
}
</script>
</body>
</html>
运行结果:
这个是基于示例 19-2小的交互游戏。鼠标移动到小球上,小球就会渐渐消失。这里用到了鼠标事件canvas.addEventListener("mousemove",function);
以后会详细说。还用到了一个新的API——isPointInPath()
。这个方法接收两个参数,就是一个点的坐标值,用来判断指定的点是否在当前路径中。若是,则返回true。
像素操作API
还有最后六个关于像素操作的API,基本不会用到,这里就不详细说了。列表如下。
属性 | 描述 |
---|---|
width | 返回 ImageData 对象的宽度 |
height | 返回 ImageData 对象的高度 |
data | 返回一个对象,其包含指定的 ImageData 对象的图像数据 |
方法 | 描述 |
---|---|
createImageData() | 创建新的、空白的 ImageData 对象 |
getImageData() | 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据 |
putImageData() | 把图像数据(从指定的 ImageData 对象)放回画布上 |
如果童鞋们想深入学习,可以直接查HTML5 Canvas参考手册,自行了解学习。
Canvas 图形库
不知不觉写了22个章节,所有我们写的图形其实都可以封装在一个JS文件里,这个文件就是属于我们自己的图形库、图形引擎。当然,第三方也提供了很多优秀的图形库,这里推荐三个给大家。
大家有兴趣的话可以自行查阅了解一下。
Canvas API没有结束
Canvas的标准一直在更新,大家可以访问 W3C Canvas标准查看最新的API。但是一般最新的API很多浏览器都不会立刻去支持,所以可以等待大多数浏览器稳定支持了之后,我们再去掌握它也不迟。
至此,目前所有的Canvas API我们就已经讲完了。掌握了所有的绘画方法和技巧,成为一个艺术家,并不是我们最终的目标。或许,现在大家已然可以绘制出优美的图形,或抽象、或清新。或许,现在大家已经可以将Canvas API铭记于心,并且能够熟练使用它。
但是要知道,这只是基础。在之后的日子里,我们要基于Canvas 学习动画。众所周知,动画是由一帧帧的画面构成,不会绘画哪来动画?所以,Canvas绘制只是后面学习的基础。
这不是结束,而是一个新的开始。让我们继续前进~