canvas的fillStyle

最新推荐文章于 2024-08-16 13:20:36 发布

jojo付啾啾

最新推荐文章于 2024-08-16 13:20:36 发布

阅读量465

点赞数

分类专栏： html5 文章标签：前端 html5 canvas的fillStyle

本文链接：https://blog.csdn.net/DreamFJ/article/details/81483459

版权

html5 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

以下方法也适用于strokeStyle，但是一般不会给strokeStyle设置样式

1.线性渐变

var lgrd = context.createLinearGradient(xstart,ystart,xend,yend);
lgrd.addColorStop(stop,color);
context.fillStyle = lgrd;

2.径向渐变

var rgrd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);分别对应两个圆的圆心坐标和半径
rgrd.addColorStop(stop,color);
context.fillStyle = rgrd;

3.createPattern(img,repeat-style);

img

js图片对象
canvas对象，这个canvas元素要以创建元素的形式创建

function createBackgroundCanvas(){
    var backCanvas = document.createElement("canvas");
    backCanvas.width = 100;
    backCanvas.height = 100;
    var backCanvasContext = backCanvas.getContext("2d");
    ...//绘制图形的操作
    return backCanvas;
}