Canvas入门(一)

五、在页面中加入canvas元素

在页面中插入canvas元素非常直观,如下:

<canvas height=“200” width=“200”></canvas>

以上代码会在页面中创建一个200 X 200像素的区域。但是注意该区域是不可见的。如果要为其添加一个边框,可以通过设置一些CSS样式完成。

<canvas id=“square” style=”border: 1px solid;” height=“200” width=“200”>

</canvas>

上边的代码我们为canvas指定了一个square属性,主要是方便我们可以使用dom方便的获取到canvas的对象,id属性时非常重要的,因为我们对canvas的一切操作都是通过JS来控制的,如果没有id获取canvas元素会非常复杂。

上边的代码会在页面的效果如下:

虽然仅仅是一个空白的方块,但是艺术家可以在一张白纸上画出美丽的图画。现在我们就尝试在这张白纸上画一条对角线吧。

//获取canvas对象

var canvas = document.getElementById(“square”);

//获取context对象

var context = canvas.getContext(“2d”);

//用绝对坐标来创建一条路径

context.beginPath();

context.moveTo(70,140);

context.lineTo(140,70);

//将这条线绘制在canvas上

context.stroke();

这段JS代码虽然简单,但是却展示出来使用Canvas API的重要流程。

  1. 通过id获取canvas对象
  2. 调用canvas对象的getContext()方法,并传入希望使用canvas的类型。这里我传入了“2d”来获取一个二维上下文。
  3. 调用三个方法,beginPath、moveTo、lineTo。传入了这条线的起点终点和坐标。

方法moveTo和lineTo实际上并不画线,而是在结束canvas操作的时候,通过调用context.stroke()方法完成线条的绘制。绘制结果如下:

六、变换

现在我们来说一下在canvas上绘制图像的另一种方式——使用变换。接下来的代码显示结果和上面一样。只是绘制对角线的代码不同。这个示例可能会让人感觉使用变换增加了不必要的复杂性。但是实际上变换是实现复杂canvas操作的最好方式。在后面的示例中将会看到,我们使用了大量的变换,而这对数据Canvas的复杂功能至关重要。

我们可以把变换当成是介于开发人员发出的指令和canvas显示结果之间的一个修正层。不管开发中是否使用变换,修正层始终都是存在的。

修正——在绘制系统中的说法是变换——在应用的时候可以被顺序应用、组合或者随意修改。每个绘制操作的结果显示在canvas上之前都要经过修正层去做修正。虽然这么做增加了额外的复杂性,但却为绘制系统添加了更为强大的功能,可以像目前主流图像编辑工具那样支持实时的图像处理,所以API中这部分内容的复杂性是必要的。

translate函数

   //获取canvas对象

var canvas = document.getElementById(“square”);

//获取context对象

var context = canvas.getContext(“2d”);

//保存当前绘图状态

context.save();

//向右下方移动绘图上下文

context.translate(70,140);

//以原点为起点,绘制与前面相同的线段

context.beginPath();

context.moveTo(0,0);

context.lineTo(70,-70);

context.stroke();

//恢复原有的绘图状态

context.restore();

解析:

  1. 通过id获取canvas对象
  2. 调用getContext(“2d”)获取上下文对象
  3. 保存尚未修改的context
  4. 调用translate()函数。通过这个操作,当平移行为发生的时候,我们提供的变换坐标会被添加到结果坐标上,结果就是将对角线移动到了新的位置上。
  5. 应用平移后就可以使用普通的绘制操作来画对角线了。
  6. 在这条线勾画出来以后,调用stroke将其显示在canvas上
  7. 恢复context值原始专题,这样后续的canvas操作就不会被刚才的平移操作影响。

执行结果:

虽然新绘制的对角线看着和前面的一模一样,但是这次绘制已经使用了强大的变换功能。下边我们还要来体会变换的强大之处。

 

本教程由尚硅谷教育大数据研究院出品,如需转载请注明来源,欢迎大家关注尚硅谷公众号(atguigu)了解更多。


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)