粤嵌教育
gzyueqian
13352868059

粤嵌HTML5教程 关于Canvas你懂得多少?

更新时间: 2018-04-14 14:48:03来源: 粤嵌教育浏览量:2700

  在学习html5教程中,canvas是很重要的一部分知识,需要熟练掌握。Canvas从另外一个角度来“模拟”页面截图的功能。它不是直接的去获取截图数据,而是将页面中的内容在canvas绘制出来。功能还是能够让人眼前一亮。粤嵌HTML5教程就来教大家认识一下什么是Canvas:

  一、 Canvas是什么?

  HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。<canvas> 标签只是图形容器,必须使用脚本来绘制图形。你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

  二、创建一个画布(Canvas)

  一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制.注意: 默认情况下 <canvas> 元素没有边框和内容。


HTML5教程


  <canvas>简单实例如下:

  <canvas id="myCanvas" width="200" height="100"></canvas>

  注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。

  提示:你可以在HTML页面中使用多个 <canvas> 元素。

  三、Canvas坐标

  canvas 是一个二维网格。左上角坐标为 (0,0),上面的 fillRect 方法拥有参数 (0,0,150,75)。意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。

  四、Canvas路径

  在Canvas上画线,我们将使用以下两种方法:1、moveTo(x,y) 定义线条开始坐标;2、lineTo(x,y) 定义线条结束坐标;

  五、Canvas 渐变

  渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同的方式来设置Canvas渐变:

  1、createLinearGradient(x,y,x1,y1) - 创建线条渐变

  2、createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

  当我们使用渐变对象,必须使用两种或两种以上的停止颜色。设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线。

  通过以上这五点内容,大家对HTML5教程中的Canvas部分应该更加清晰了,其实学习起来并不会难到哪里去,关键还是需要记忆以及多操作去熟悉,这样才能熟练掌握。有任何问题可咨询粤嵌官网,或者参与粤嵌HTML5培训,让你迅速成为一名的前端开发者。




免费预约试听课

推荐阅读