HTML5画布基本绘图之填充样式的实现方法

小编给大家分享一下HTML5画布基本绘图之填充样式的实现方法,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

<强> & lt; canvas> & lt;/canvas> 是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。
<强> & lt; canvas> & lt;/canvas> 只是一个绘制图形的容器,除了id、类、风格等属性外,还有高度和宽度属性。在& lt; canvas>在元素上绘图主要有三步:
1。获取& lt; canvas>元素对应的DOM对象,这是一个画布对象,
2。调用帆布对象的getContext()方法,得到一个CanvasRenderingContext2D对象,
3。调用CanvasRenderingContext2D对象进行绘图。
<强>填充样式
前面用到的fillStyle和strokeStyle除了设置颜色外,还能设置其他填充样式,这里以fillStyle为例:
<强> ?线性渐变
使用步骤
(1) var研磨=上下文。createLinearGradient (xstart ystart、xend yend)创建一个线性渐变,设置起始坐标和终点坐标;
(2)研磨。addColorStop(停止、颜色)为线性渐变添加颜色,停止为0 ~ 1的值;
(3)上下文。fillStyle=研磨将赋值给上下文。
<强> ?径向渐变
该方法与线性渐变使用方法类似,只是第一步接收的参数不一样
var研磨=上下文。createRadialGradient (x0, y0, r0 (x1, y1, r1);接收起始圆心的坐标和圆半径以及终点圆心的坐标和圆的半径。
<强> ?位图填充
createPattern (img repeat-style)使用图片填充,repeat-style可以取重复,repeat-x, repeat-y,不再重演。