HTML5 Canvas之填充样式

最新推荐文章于 2024-08-30 11:04:59 发布

原创最新推荐文章于 2024-08-30 11:04:59 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

html5 专栏收录该内容

10 篇文章

订阅专栏

本文深入解析了fillstyle()的其他设置，包括线性渐变、径向渐变、使用图片、画布或video进行图案填充的方法，并通过实例演示了如何创建和应用这些渐变效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这一节主要讨论fillstyle()的其他设置

线性渐变

var grd=context.createLinearGradient(xstart,ystart,xend,yend)
两个点（xstart,ystart）(xend,yend) 渐变线
grd.addColorStop(stop,color)
stop：浮点值，决定关键色的位置
color：决定关键色是什么颜色

window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext('2d');

    var grd=context.createLinearGradient(100,100,400,400)
    grd.addColorStop(0.0,'#fff')
    grd.addColorStop(1.0,'#000')
    context.fillStyle=grd
    context.fillRect(100,100,400,400)
}

这里写图片描述

径向渐变

var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1)
两个圆（x0,y0,r0）和（x1,y1,r1）之间
grd.addColorStop(stop,color)
其他的和线性渐变是一样的

使用图片、画布或者video

createPattern(img,repeat-style)
使用示例：

    var backgroundImage=new Image()
    backgroundImage.src="brick-jpg"
    var pattern=context.createPattern(backgroundImage,'no-repeat')
    context.fillStyle=pattern
    context.fillRect(100,100,400,400)