使用canvas绘制图形时,下面是绘制填充样式的是,canvas绘制html标签

　　canvas/canvas是HTML5中的新标签，用来画图形。其实这个标签和其他标签一样，特殊之处在于它可以得到一个CanvasRenderingContext2D对象，这个对象可以通过JavaScript脚本来控制绘制。

　　canvas/canvas只是一个绘制图形的容器。除了id，class，style等属性，还有高度和宽度属性。在画布上绘制元素有三个主要步骤：

　　1.获取canvas元素对应的DOM对象，这是一个Canvas对象；

　　2.调用CanvasRenderingContext2D对象的getContext()方法；

　　3.调用CanvasRenderingContext2D对象进行绘制。

　　填充样式

　　之前用的fillStyle和strokeStyle除了设置颜色，还可以设置其他填充样式。这里，以fillStyle为例：

　　•线性渐变

　　使用步骤

　　(1)var grd=context . createlanegradient(x start，ystart，xend，yend)创建线性渐变，并设置起始坐标和终止坐标；

　　(2)grd.addColorStop( Stop，color)为线性渐变添加颜色，stop为0~1的值；

　　(3)context.fillStyle=grd将被赋给context。

　　•径向渐变 该方法类似于线性梯度法，除了在第一步中接收的参数不同。

　　var grd=context . createradialgradient(x0，y0，r0，x1，y1，R1)；接收起点中心的坐标和半径以及终点中心的坐标和半径。

　　•位图填充 创建模式(IMG，重复风格)充满了图片。重复样式可以采用重复、重复x、重复y和不重复。

　　代码将内容复制到剪贴板var canvas=document . getelementbyid( canvas )；var context=canvas . get context( 2d )；//线性渐变vargrd=context . createlanegradient(10，10，100，350)；grd.addColorStop(0， # 1ef9f 7 )；grd.addColorStop(0.25， fc0f 31 )；grd.addColorStop(0.5， ECF 811 )；grd.addColorStop(0.75， # 2f 0af 1 )；grd.addColorStop(1， # 160303 )；context.fillStyle=grdcontext.fillRect(10，10，100，350)；//radial gradient vargrd=context . create radial gradient(325，200，0，325，200，200)；grd.addColorStop(0， # 1ef9f 7 )；grd.addColorStop(0.25， fc0f 31 )；grd.addColorStop(0.5， ECF 811 )；grd.addColorStop(0.75， # 2f 0af 1 )；grd.addColorStop(1， # 160303 )；context.fillStyle=grdcontext.fillRect(150，10，350，350)；//位图填充varbgimg=new image()；bgi mg . src= background . jpg ；bgi mg . onload=function(){ var pattern=context . create pattern(bgi mg， repeat )；context.fillStyle=patterncontext . stroke style= # f 20 b 0b ；context.fillRect(600，100，200，200)；context.strokeRect(600，100，200，200)；};效果如下：

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。