技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> Canvas学习教程 : Canvas介绍

Canvas学习教程 : Canvas介绍

浏览:3153次  出处信息

这一系列教程会带你快速认识Canvas，这是第一篇，RockUX先带你简单认识一下Canvas。Canvas是现代浏览器中内建的一个画图的方法，这篇文章中，RockUX会介绍如何访问Canvas元素，怎么画图形，变换颜色以及擦除。这个新技术非常的令人激动。

Canvas元素简介

当你听到Canvas的时候，你的第一反应应该是会想到HTML5的新元素。技术上来说，这只是一部分，从现在开始，我们先忘记那个吧。Canvas元素是浏览器新技术对外的一个窗口。

使用Canvas元素非常的简单，就是一个简单的HTML标签和给定的宽高。

1
2
3

<canvas height="500" width="500">
     <!--这里是备注内容-->
</canvas>

这个canvas当然什么都不会做，他只会在你的页面上放置一个透明的画布。Canvas里面写的内容会在浏览器不支持canvas的时候显示出来。

浏览器的支持

哪些浏览器支持Canvas，这个很重要。基本上现代浏览器都支持，包括最新版的IE。

  • Internet Explorer (9.0+)
  • Safari (3.0+)
  • Firefox (3.0+)
  • Chrome (3.0+)
  • Opera (10.0+)
  • iOS (1.0+)
  • Android (1.0+)

有意思的是，你在IE8及以下的版本中可以使用插件来让浏览器支持，这里查看。

Canvas的尺寸

学习Canvas很重要的一点就是要给他设置大小尺寸。使用CSS来设置宽高，会导致Canvas去调整适应那个尺寸。这背后的逻辑是：Canvas元素的渲染是调用浏览器的2D图形引擎来做的。无论怎样，只要知道用CSS来设置Canvas的宽高会有一些奇怪的问题。

2D图形渲染

上一节中提到的Canvas只是整个系统中的一部分。另外一部分就是2D渲染引擎，可以让你立即感受到你所做的的一个重要部分。 再解释一下：当你使用Canvas的时候，你不是在Canvas上面直接画。相反你实际上是在一个2D图形环境上操作，只不过你是调用JavaScript的API通过Canvas元素做到的。细节的东西可能在这里没什么用处，但是还是了解一下吧。

坐标系统

如果你之前使用过2D图形编程语言的话，那么你应该了解屏幕坐标系统。Canvas的2D图形引擎也没什么区别，也是用直角坐标系，原点坐标在左上角。X轴右移增大，Y轴下移增大。还是很直观的。 大部分情况下，屏幕上的一像素相当于这个坐标系的一个单位。

访问2D图形引擎

调用图形接口，你需要使用JavaScript的API，你需要使用的是getContext方法：

 <!DOCTYPE html> 
 <html> 
 <head> 
 <title>Canvas from scratch</title> 
 <meta charset="utf-8"> 
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
 <script> 
 $(document).ready(function() { 
 var canvas = document.getElementById("myCanvas"); 
 var ctx = canvas.getContext("2d"); 
 }); 
 </script> 
 </head> 
 
 <body> 
 <canvas id="myCanvas" width="500" height="500"> 
 <!-- Insert fallback content here --> 
 </canvas> 
 </body> 
 </html>

这里使用jQuery是为了用domready方法，你也可以用你自己喜欢的JS库，然后把这段代码放在文档底部就好了。

在调用getContext方法之后，变量ctx中就包含了2D图形引擎的引用，这意味着你就可以开始在Canvas上面画东西了。

画矩形

在获取2D图形引擎的引用之后，你就可以通过一些方法开始画图了。最基础的一个方法就是fillRect，这个方法会使用一定颜色（默认是黑色）画一个特定的矩形。

添加下面的代码：

1

ctx.fillRect(50,50,100,100);

这会在画布上画一个黑方块出来，距离画布边缘也有一定的距离。

你已经用HTML5画了你的第一个图形了，感觉不错吧，哈哈。

你可能注意到，你使用画矩形的API来画了一个正方形，因为在提供的API中没有专门化正方形的，就用矩形来画了。

fillRect方法有四个参数：

  • 第一个起始位置的X坐标
  • 第二个是起始位置的Y坐标
  • 第三个是宽度
  • 第四个是高度

将fillRect方法写成伪代码就是：

1

ctx.fillRect(x,y,width,height);

更酷的是，你不仅仅可以填充矩形，还可以画空的矩形，也就是只有边框的矩形。可以使用strokeRect方法：

1

ctx.strokeRect(50,50,100,100);
跟fillRect的参数一样，你会得到下面的图形：

很简单，也很优雅，Canvas的基本方法都是这样的，然后可以把他们组合起来用，会有很多精彩的东西出来。

画路径

除过矩形（唯一一个可以直接调用API完成的图形），还有路径。通过路径，你可以画各种线，直线或者曲线，叠加使用可以画一些很复杂的东西出来。

画一个简单的路径需要下面的这些方法：

  • beginPath开始一个新路径
  • moveTo将点移动到path开始的位置
  • lineTo从moveTo定义的点开始画一条线
  • closePath将path的最后一个点和最初的点闭合起来
  • fill使用某个颜色填充
  • stroke只填充边框

试试下面的代码：

1
2
3
4
5
6

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
ctx.closePath();
ctx.fill();

我们会看到这个图：

你可以根据这个方法来画任何你想画的图形。RockUX会在后面的教程中介绍更多的高级方法，大家多多关注rockux.com吧。需要知道就是比起矩形，path是你想画复杂图形的唯一办法。

换个颜色吧

到现在为止，我们填充的颜色都是黑色。提供的API中有一些是可以修改图形的颜色的，例如fillStyle和strokeStyle。

他们的名字具有自解释性。看个例子吧：

1
2

ctx.fillStyle="rgb(255,0,0)";
ctx.fillRect(50,50,100,100);

那么就会得到下面的图形：

也可以控制边框的颜色：

1
2

ctx.strokeStyle="rgb(255,0,0)";
ctx.strokeRect(50,50,100,100);

就会得到下面的图形：

fillStyle和strokeStyle支持普通css的颜色值，可以是rgb，rgba，hsa，颜色名称或者16进制编码。

需要注意的是，我们改变canvas的颜色并不会影响之前已经画了的图形。你画了一个黑色的矩形，然后改变颜色为红色，又花了一个红色的矩形，那么第一个矩形依然是黑色，不影响。

改变线的宽度

除了改变颜色，你还可以改变线的宽度。你需要调用lineWidth这个属性。

1
2
3

ctx.lineWidth = 20;
ctx.strokeStyle = 'rgb(255,0,0)';
ctx.strokeRect(50,50,100,100);

就会看到下面的图形：

这个方法对于路径也是同样有用的：

1
2
3
4
5
6
7

ctx.lineWidth = 20;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
ctx.closePath();
ctx.stroke();

就会得到下面这个更粗边框的三角形：

API还提供了一些其他的方法。比如：lineCap会改变线的末端的样子，lineJoin会改变线的拐角的样子。你可以在这里查看更多的文档。

擦除Canvas

最后还要知道的就是如何擦除Canvas。你已经学习了如何在画布上画出图形，当然也需要知道怎么清除他们，这也很有用。

还好，擦除Canvas还是比较简单的，只需要调用一个API就行了，clearRect，他会负责让每个点都透明。

在这篇文章中，我们的画布是500X500的，所以你可以这样子直接清除：

1
2

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(0, 0, 500, 500);

这里截图就没意义了，如果成功执行的话，你的画布就是空的了。这个方法的参数跟fillRect的参数意义是一样的。如果你不是很确定canvas的尺寸，那么也可以写成这样：

1

ctx.clearRect(0,0,canvas.width,canvas.height);

擦除canvas的一小部分

如果你不想擦除整个canvas，那就不要那么做。你可以只擦除一小部分。想象你有一个黑色的方块，然后旁边有个红色的方块。

1
2
3

ctx.fillRect(50, 50, 100, 100);
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(200, 50, 100, 100);

看起来就是这样的：

你可以擦除黑色的方块，然后留下红色的：

1

ctx.clearRect(50, 50, 100, 100);

注意调用这个方法的时候，传入的参数就跟画黑方块的一样。然后就可以看到：

很简单，不是么，清除画布跟画图会用的一样多，而且在后面RockUX的教程中你会了如何画动画的时候，清除会用的非常多。

总结

可以看到，Canvas是浏览器中非常特别的一部分。通过它，你可以自己画出图形，只需要写JS，而且不用加载插件。很简单，也很好学，你把他发挥到极致的时候也会非常的有用。

在RockUX.com后面的文章中，你会看到一些Canvas的高级用法，比如画圆，画曲线，而且这还不是全部，还有如果修改图片等等。

计算你不打算马上使用Canvas，你也应该了解一下，这在将来是非常有用的东西。

建议继续学习：

  1. HTML5 离线缓存-manifest简介    (阅读：16094)
  2. 面向移动设备的HTML5开发框架梳理    (阅读：5909)
  3. JavaScript，只有你想不到    (阅读：5087)
  4. HTML5本地存储初探(二)    (阅读：4384)
  5. Phonegap + HTML5 开发经验小结    (阅读：4101)
  6. HTML5是什么东东 我们为什么要关注    (阅读：3841)
  7. HTML5文件API之图片预览    (阅读：3659)
  8. HTML6 初探 — 你没看错，是6不是5    (阅读：3641)
  9. 让你的网站也像Gmail一样支持文件拖放上传-HTML5之File API    (阅读：3443)
  10. HTML5技术的调研以及贴吧应用总结    (阅读：3450)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：HTML5 中 div section article 的区别
后一篇：拥抱并使用CSS3 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1