html5 中是怎么实现绘制图形?
html5 中可以实现绘画图形的功能, 需要注意的是 html5 只提供 2D, 不提供 3D 绘画功能. canvas 元素是 H5 总新增的元素, 它用来专门绘制图形. 你也可以把 canvas 元素理解成一块 "画布", 我们可以在其中绘制图形. 在 canvas 元素中绘画不是拿鼠标来绘制图形, 实际上在 H5 完成绘画功能, 不仅仅需要 canvas 元素, 而且需要 JavaScript 脚本来配合才能完成绘制图形. 所以说把 html5 中的 canvas 元素理解成画布是是合适不过的.
html5 中的 canvas 元素
canvas 元素必须要指定 id,width(宽),height(高) 属性, 虽然 canvas 元素是 H5 中用来绘制的图形, 但是它的放置放和其他的元素没有区别. 比如说 canvas id="myCanvas" width="200" height="100" 是放置了一个 200*100 的 canvas 元素.
html5 中的常用的绘制图形
绘制矩形
创建 canvas 元素→取得上下文 (使用 canvas 对象的 getcontent 方法获得上下文)→填充绘制边框→设定样式→指定线宽, 颜色. 代码如下图:
可以用 clearRect 方法擦除指定区域的图形, 使矩形区域颜色变透明, context.clearRect(x,y,width,height).
绘制圆形
在这里小编建了一个前端学习交流扣扣群: 132667127, 我自己整理的最新的前端资料和高级开发教程, 如果有想需要的, 可以加群一起学习交流
绘制圆形要比矩形复杂一点, 需要使用到路径, 创建图形路径→关闭路径→调用绘制方法, 路径. 代码如下:
cxt.beginPath(); 是开始创建路径, 有几次是循环创建路径, 每次开始都需要调用 beginPath() 函数.
cxt.arc(70,18,15,0,Math.PI*2,true); 是是创建路径, 使用了 arc() 方法, 它的语法如下:
cxt.closePath();cxt.fill(); 关闭绘画路径后调用绘制路径. 最后给大家一个作业, 你可以试试下面的代码在浏览器执行后会是什么图形?
来源: http://www.bubuko.com/infodetail-3133189.html