HTML5中Canvas的使用方法有哪些

这篇文章主要介绍了HTML5中Canvas的使用方法有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

为长葛等地区用户提供了全套网页设计制作服务,及长葛网站建设行业解决方案。主营业务为成都做网站、成都网站建设、长葛网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

使用 stroke() 方法来绘制线条

使用 beginPath() 方法来清除当前画布中存在的路径 并且 准备开始绘制新的路径

调用 arc() 方法,传入相应的参数

使用 stroke() 方法来绘制线条

您的浏览器不支持HTML5 Canvas标签

执行一下

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

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

创建渐变对象(线性还是径向)

使用两种或两种以上的停止颜色来实现颜色渐变效果:addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1

应用渐变到画布元素中,设置画布上下文对象的 fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线

您的浏览器不支持HTML5 Canvas标签

执行一下

获取或者创建 图像的dom对象

使用 drawImage 方法实现图像的绘制

您的浏览器不支持HTML5 Canvas标签

执行一下

使用 font  属性来定义字体

使用 fillText(text,x,y) 在 canvas 上绘制实心的文本

使用 strokeText(text,x,y) 在 canvas 上绘制空心的文本

您的浏览器不支持HTML5 Canvas标签

执行一下

感谢你能够认真阅读完这篇文章,希望小编分享的“HTML5中Canvas的使用方法有哪些”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


文章名称:HTML5中Canvas的使用方法有哪些
转载来源:http://ybzwz.com/article/gccsoc.html