橡皮擦clearRect()

之前一直教大家怎么绘图,各种画笔各种样式,却没有教过童鞋们使用橡皮擦。Canvas 提供了clearRect()方法,就是清空指定矩形上的画布上的像素。它接受四个参数,和其他绘制矩形的方法一样——context.clearRect(x,y,w,h)

下面,我们把之前新画布(实例 9-1)上的空白矩形给擦了吧!让整个页面显示出完整的背景图片。

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>clearRect()</title>
  6. <style>
  7. body { background: url("./images/bg2.jpg") repeat; }
  8. #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
  9. </style>
  10. </head>
  11. <body>
  12. <div id="canvas-warp">
  13. <canvas id="canvas">
  14. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  15. </canvas>
  16. </div>
  17. <script>
  18. window.onload = function(){
  19. var canvas = document.getElementById("canvas");
  20. canvas.width = 800;
  21. canvas.height = 600;
  22. var context = canvas.getContext("2d");
  23. context.fillStyle = "#FFF";
  24. context.fillRect(0,0,800,600);
  25. //清空画布
  26. context.clearRect(0,0,canvas.width,canvas.height);
  27. };
  28. </script>
  29. </body>
  30. </html>

演示 22-1

运行结果:

21.最后的API - 图1

橡皮擦就是这么简单~

点泡泡小游戏

这里通过一个小游戏介绍一个交互性很强的API——isPointInPath()

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>点泡泡</title>
  6. <style>
  7. #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
  8. </style>
  9. </head>
  10. <body>
  11. <div id="canvas-warp">
  12. <canvas id="canvas">
  13. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  14. </canvas>
  15. </div>
  16. <script>
  17. var balls = [];
  18. var canvas = document.getElementById("canvas");
  19. var context = canvas.getContext("2d");
  20. window.onload = function(){
  21. canvas.width = 800;
  22. canvas.height = 600;
  23. for(var i=0; i<50; i++){
  24. var aBall = {
  25. x: Math.random() * canvas.width,
  26. y: Math.random() * canvas.height,
  27. r: Math.random() * 50 + 20
  28. };
  29. balls[i] = aBall;
  30. }
  31. draw();
  32. canvas.addEventListener("mousemove",detect);
  33. };
  34. function draw(){
  35. for(var i=0; i<balls.length; i++){
  36. context.beginPath();
  37. context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI *2);
  38. context.globalAlpha = 0.5;
  39. var R = Math.floor(Math.random() * 255);
  40. var G = Math.floor(Math.random() * 255);
  41. var B = Math.floor(Math.random() * 255);
  42. context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
  43. context.fill();
  44. }
  45. }
  46. function detect(){
  47. var x = event.clientX - canvas.getBoundingClientRect().left;
  48. var y = event.clientY - canvas.getBoundingClientRect().top;
  49. for(var i=0; i<balls.length; i++){
  50. context.beginPath();
  51. context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2);
  52. if(context.isPointInPath(x,y)){
  53. context.fillStyle = "rgba(255,255,255,0.1)";
  54. context.fill();
  55. }
  56. }
  57. }
  58. </script>
  59. </body>
  60. </html>

演示 22-2

运行结果:

21.最后的API - 图2

这个是基于示例 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文件里,这个文件就是属于我们自己的图形库、图形引擎。当然,第三方也提供了很多优秀的图形库,这里推荐三个给大家。

  1. canvasplus
  2. Artisan JS
  3. Rgraph

大家有兴趣的话可以自行查阅了解一下。

Canvas API没有结束

Canvas的标准一直在更新,大家可以访问
W3C Canvas标准查看最新的API。但是一般最新的API很多浏览器都不会立刻去支持,所以可以等待大多数浏览器稳定支持了之后,我们再去掌握它也不迟。


至此,目前所有的Canvas API我们就已经讲完了。掌握了所有的绘画方法和技巧,成为一个艺术家,并不是我们最终的目标。或许,现在大家已然可以绘制出优美的图形,或抽象、或清新。或许,现在大家已经可以将Canvas API铭记于心,并且能够熟练使用它。

但是要知道,这只是基础。在之后的日子里,我们要基于Canvas 学习动画。众所周知,动画是由一帧帧的画面构成,不会绘画哪来动画?所以,Canvas绘制只是后面学习的基础。

这不是结束,而是一个新的开始。让我们继续前进~😋