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的用法示例”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。