填充样式主要针对fillStyle。fillStyle除了可以赋值为color，还可以赋值渐变色，包括线性渐变色和径向渐变色，还是和css3里的内容类似。

一、线性渐变

1、设置线性渐变的填充样式

设置线性渐变的填充样式需要2步骤

1、设置渐变线段

通过2个坐标确定渐变线段，来定义渐变的方向和尺度。

var linearGradient=context.createLinearGradient(xstart,ystart,xend,yend);

2、添加关键色

stop来决定关键色的位置，从0.0到1.0的浮点数表示

color来决定关键色的颜色

linearGradient.addColorStop(stop,color);

然后linearGradient变量就可以作为fillStyle的值。

window.onload=function(){

    var canvas=document.getElementById("canvas");

    canvas.width=400;

    canvas.height=400;

    var context=canvas.getContext("2d");

    //从左上角到右下角

    var linearGradient=context.createLinearGradient(0,0,400,400);

    linearGradient.addColorStop(0.0,"#fff");//由白

    linearGradient.addColorStop(1.0,'#000');//变黑

    context.fillStyle=linearGradient;//然后就可以赋给fillStyle了

    context.fillRect(0,0,400,400);

}

2、注意点

可以添加无数个addColorStop

window.onload=function(){

    var canvas=document.getElementById("canvas");

    canvas.width=400;

    canvas.height=400;

    var context=canvas.getContext("2d");

    //从左上角到右下角

    var linearGradient=context.createLinearGradient(0,0,400,400);

    linearGradient.addColorStop(0.0,"red");//由红

    linearGradient.addColorStop(0.166,'orange');//变橙

    linearGradient.addColorStop(0.332,'yellow');//变黄

    linearGradient.addColorStop(0.498,'green');//变绿

    linearGradient.addColorStop(0.664,'cyan');//变青

    linearGradient.addColorStop(0.83,'blue');//变蓝

    linearGradient.addColorStop(1,'purple');//变紫

    context.fillStyle=linearGradient;//然后就可以赋给fillStyle了

    context.fillRect(0,0,400,400);

}

红橙黄绿青蓝紫七个colorStop

除了倾斜渐变，还可以是水平渐变和垂直渐变。只需要修改渐变线段的起始坐标。

var linearGradient=context.createLinearGradient(0,0,400,0); //水平

var linearGradient=context.createLinearGradient(0,0,0,400);//垂直

渐变线段可以不跨越整个canvas画布，比如

var linearGradient=context.createLinearGradient(0,0,200,200);

线性渐变到(200,200)结束，结束的其它部分显示的是结束时的颜色。

渐变线段可以超过画布的大小，定义在画布外面的关键色将不会显示。

var linearGradient=context.createLinearGradient(-200,-200,400,400); //超过画布

绘制的填充的形状也不一定占满整个画布。填充形状会在填充线段上找到合适的填充色。

var linearGradient=context.createLinearGradient(-200,-200,400,400); //超过画布

3，将线性渐变应用到星空

原来是黑色星空变成渐变色天空。

//context.fillStyle="black"; //原来是黑色星空

    var linearGradient=context.createLinearGradient(0,0,0,canvas.height); //垂直渐变

    linearGradient.addColorStop(0.0,'black');//从黑色

    linearGradient.addColorStop(1.0,'#035');//到深蓝色

    context.fillStyle=linearGradient;//赋值给fillStyle

再做点小修改,把画布改成长方形，把星星分布在上空制造出天和地的效果。

window.onload=function(){

    var canvas=document.getElementById("canvas");

    canvas.width=1200; //改成长方形

    canvas.height=800;

    var context=canvas.getContext("2d");

    //context.fillStyle="black"; //原来是黑色星空

    var linearGradient=context.createLinearGradient(0,0,0,canvas.height); //垂直渐变

    linearGradient.addColorStop(0.0,'black');//从黑色

    linearGradient.addColorStop(1.0,'#035');//到深蓝色

    context.fillStyle=linearGradient;//赋值给fillStyle

    context.fillRect(0,0,canvas.width,canvas.height);

    for(var i=0;i<200;i++){

        var r=Math.random()*5+5; //星星变小点

        var x=Math.random()*canvas.width;

        var y=Math.random()*canvas.height*0.65; //产生天和地的效果，y坐标从0到canvas高的65%的区间

        var a=Math.random()*360;

        drawStar(context,x,y,r,a);

    }

}        

//rot顺时针旋转的角度

function drawStar(ctx,x,y,R,rot){

    ctx.save();

    ctx.translate(x,y);

    ctx.rotate(rot/180*Math.PI);

    ctx.scale(R,R);

    starPath(ctx);

    //绘制在(x,y)大小为R，旋转rot度的五角星

    ctx.fillStyle="#fb3";

    //放弃外边框的绘制

    // ctx.strokeStyle="#fd5";

    // ctx.lineWidth=3;

    // ctx.lineJoin="round";

    ctx.fill();

    // ctx.stroke();

    ctx.restore();

}

function starPath(ctx){

    ctx.beginPath();

    //角度转弧度：除以180*PI

    for(var i=0;i<5;i++){

        ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),

            -Math.sin((18+i*72)/180*Math.PI));

            ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,

            -Math.sin((54+i*72)/180*Math.PI)*0.5);

    }

    ctx.closePath();

}

渐变色可以用在icon里等，展示更立体的效果，更逼真，关键是确定好colorStop。

二、径向渐变

radial Gradient定义在两个同心圆之间的放射状渐变。

1、设置线性渐变的填充样式

同样使用2步创建：

1、确定好2个圆环

var radialGradient=context.createRadialGradient(x0,y0,r0,x1,y1,r1);

2、添加colorStop

radialGradient=context.addColorStop(stop,color);

然后linearGradient变量就可以作为fillStyle的值。

把上面的彩虹线性渐变改一下：

window.onload=function(){

    var canvas=document.getElementById("canvas");

    canvas.width=400;

    canvas.height=400;

    var context=canvas.getContext("2d");

    //从左上角到右下角

    var radialGradient=context.createRadialGradient(200,200,0,200,200,200);

    radialGradient.addColorStop(0.0,"red");//由红

    radialGradient.addColorStop(0.166,'orange');//变橙

    radialGradient.addColorStop(0.332,'yellow');//变黄

    radialGradient.addColorStop(0.498,'green');//变绿

    radialGradient.addColorStop(0.664,'cyan');//变青

    radialGradient.addColorStop(0.83,'blue');//变蓝

    radialGradient.addColorStop(1,'purple');//变紫

    context.fillStyle=radialGradient;//然后就可以赋给fillStyle了

    context.fillRect(0,0,400,400);

}

把内圆的半径增大，

var radialGradient=context.createRadialGradient(200,200,100,200,200,200);//圆环

里面圆填充为径向渐变开始的颜色，外面圆外填充的是径向渐变结束的颜色。

2，将径向渐变应用到星空

由下边框中心点开始的径向渐变。

    //原来是线性渐变星空

    var radialGradient=context.createRadialGradient(

        canvas.width/2,canvas.height,0,

        canvas.width/2,canvas.height,canvas.height); //径向渐变

    radialGradient.addColorStop(0.0,'#035');//从深蓝色

    radialGradient.addColorStop(1.0,'black');//到黑色

    context.fillStyle=radialGradient;//赋值给fillStyle

    context.fillRect(0,0,canvas.width,canvas.height);

window.onload=function(){

    var canvas=document.getElementById("canvas");

    canvas.width=1200; //改成长方形

    canvas.height=800;

    var context=canvas.getContext("2d");

    //原来是线性渐变星空

    var radialGradient=context.createRadialGradient(

        canvas.width/2,canvas.height,0,

        canvas.width/2,canvas.height,canvas.height); //径向渐变

    radialGradient.addColorStop(0.0,'#035');//从深蓝色

    radialGradient.addColorStop(1.0,'black');//到黑色

    context.fillStyle=radialGradient;//赋值给fillStyle

    context.fillRect(0,0,canvas.width,canvas.height);

    for(var i=0;i<200;i++){

        var r=Math.random()*5+5; //星星变小点

        var x=Math.random()*canvas.width;

        var y=Math.random()*canvas.height*0.65; //产生天和地的效果，y坐标从0到canvas高的65%的区间

        var a=Math.random()*360;

        drawStar(context,x,y,r,a);

    }

}        

//rot顺时针旋转的角度

function drawStar(ctx,x,y,R,rot){

    ctx.save();

    ctx.translate(x,y);

    ctx.rotate(rot/180*Math.PI);

    ctx.scale(R,R);

    starPath(ctx);

    //绘制在(x,y)大小为R，旋转rot度的五角星

    ctx.fillStyle="#fb3";

    //放弃外边框的绘制

    // ctx.strokeStyle="#fd5";

    // ctx.lineWidth=3;

    // ctx.lineJoin="round";

    ctx.fill();

    // ctx.stroke();

    ctx.restore();

}

function starPath(ctx){

    ctx.beginPath();

    //角度转弧度：除以180*PI

    for(var i=0;i<5;i++){

        ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),

            -Math.sin((18+i*72)/180*Math.PI));

            ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,

            -Math.sin((54+i*72)/180*Math.PI)*0.5);

    }

    ctx.closePath();

}

三、使用图片、画布或者video

1、使用图片创建样式

createPattern(img,repeat-style);描述图片以什么样的方式重复。

repeat-style:no-repeat / repeat-x / repeat-y / repeat

使用图片通常为表现一种纹理或背景。

下面分别是用下图进行填充no-repeat/repeat-x/repeat-y/repeat的效果。

window.onload=function(){

    var canvas=document.getElementById("canvas");

    canvas.width=400;

    canvas.height=400;

    var context=canvas.getContext("2d");

    var backgroundImage=new Image();

    backgroundImage.src='./images/grain.jpg';

    backgroundImage.onload=function(){

        var pattern=context.createPattern(backgroundImage, "no-repeat");

        context.fillStyle=pattern;

        context.fillRect(0,0,400,400);

    }

}

2、使用画布创建填充样式

createPattern(canvas,repeat-style);

让我们可以自己绘制想要的背景图案。

动态创建100*100的画布，并且在上面绘制五角星。然后把该画布作为参数传递给createPattern()。

window.onload=function(){

    var canvas=document.getElementById("canvas");

    canvas.width=400;

    canvas.height=400;

    var context=canvas.getContext("2d");

    var bgCanvas=createBackgroundCanvas();

    var pattern=context.createPattern(bgCanvas,"repeat");

    context.fillStyle=pattern;

    context.fillRect(0,0,400,400);

}        

//动态创建100*100的画布，并且在上面绘制五角星

function createBackgroundCanvas(){

    var bgCanvas=document.createElement("canvas");

    bgCanvas.width=100;

    bgCanvas.height=100;

    var bgCanvasContext=bgCanvas.getContext("2d");

    drawStar(bgCanvasContext,50,50,50,0);

    return bgCanvas;

}

//rot顺时针旋转的角度

function drawStar(ctx,x,y,R,rot){

    ctx.save();

    ctx.translate(x,y);

    ctx.rotate(rot/180*Math.PI);

    ctx.scale(R,R);

    starPath(ctx);

    //绘制在(x,y)大小为R，旋转rot度的五角星

    ctx.fillStyle="#fb3";

    //放弃外边框的绘制

    // ctx.strokeStyle="#fd5";

    // ctx.lineWidth=3;

    // ctx.lineJoin="round";

    ctx.fill();

    // ctx.stroke();

    ctx.restore();

}

function starPath(ctx){

    ctx.beginPath();

    //角度转弧度：除以180*PI

    for(var i=0;i<5;i++){

        ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),

            -Math.sin((18+i*72)/180*Math.PI));

            ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,

            -Math.sin((54+i*72)/180*Math.PI)*0.5);

    }

    ctx.closePath();

}

3、使用video创建填充样式

createPattern(video,repeat-style);

四、总结

fillStyle可以赋值以下类型

fillStyle=color / gradient / image / canvas / video

其中为color时：

color= #ffffff / #642 / rgb(255,128,0) / rgba(100,100,100,0.8) / hsl(20,62%,28%) / red

为渐变时

var linearGradient=context.createLinearGradient(xstart,ystart,xend,yend);

var radialGradient=context.createRadialGradient(x0,y0,r0,x1,y1,r1);

然后addColorStop(stop,color)

为其它时，使用createPattern

createPattern(img, repeat-style)

createPattern(canvas,repeat-style)

createPattern(video,repeat-style)

其中repeat可以取值no-repeat / repeat-x / repeat-y / repeat

最后fillStyle的这些取值同样适用于strokeStyle。

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/8660470.html 有问题欢迎与我讨论，共同进步。

canvas填充样式的更多相关文章

HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实现纹理填充与描边. 一:颜色填充与描边 ...
HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
canvas填充规则
canvas填充规则 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ct ...
html5 canvas 填充渐变形状
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
（三）canvas绘制样式
beginPath() 对画线点的一个开始限制 moveTo() 画线的起点,只在开头使用参数两个x轴,y轴 lineTo() 后续连线两个参数x轴,y轴 stroke() 连线无填充 fill( ...
超酷！！HTML5 Canvas 水流样式 Loading 动画
今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画,这款Loading动画在加载时会呈现液体流动的动画效果,并且由于和背景颜色的对比,也略微呈现发光的动画效果. 效 ...
H5 canvas填充文字自动换行
canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行.. 然后百度了一下,已 ...
canvas填充规则，非零环绕
1.看一块区域是否填充 2.从这个区域拉一条直线 3,看和这条直线相交的轨迹 4.如果顺时针轨迹+1 5.如果逆时针轨迹-1 6.所有轨迹的值计算出来 7.如果是非0,那么填充 8.如果是0那么不填充

随机推荐

An internal error occurred during: "Building workspace". GC overhead limit exceeded
1 错误描述 2 错误原因 3 解决办法
app_offline.htm的作用
如果你要COPY站点,进行站点维护,部署,和进行大量修改,有可能要停掉你的WEB应用程序了,而以一个友好的方式提示给用户,比如什么"本网站正在更新"等等的信息可以建立一个叫app_ ...
JavaScript控制输入框只能输入非负正整数
1.问题背景问题:一个输入框,输入的是月份,保证输入的内容只能是非负正整数 2.JavaScript代码 function checkMonth() { $("month").k ...
C#的动态链接库和XML配置
今天对昨天的实例进行了改进和提高,将堆排序和冒泡排序封装在一个动态链接库中,提供函数调用和事件委托.此外加入XML进行配置,在XML中存入相关配置信息,提供一个单独的XmlClass对其进行操作,加深 ...
Struts2【开发Action】知识要点
前言前面Struts博文基本把Struts的配置信息讲解完了.....本博文主要讲解Struts对数据的处理 Action开发的三种方式在第一次我们写开发步骤的时候,我们写的Action是继承着A ...
Xampp apache与mySQL开不了解决办法
Xampp安装后,打开Xampp control panel. 点击Apache对应的Start,开不了.原因是系统的服务占用了80端口,所以要么结束系统服务,要么修改apache端口. 个人比较喜欢 ...
AC自动机模板1(【洛谷3808】)
题面题目背景这是一道简单的AC自动机模版题. 用于检测正确性以及算法常数. 为了防止卡OJ,在保证正确的基础上只有两组数据,请不要恶意提交. 题目描述给定n个模式串和1个文本串,求有多少个模式串 ...
【洛谷1131】【ZJOI2007】时态同步
题面题目描述小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3-.进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板的任何两 ...
which命令实战及原理详解-PATH实战配置
Which查找命令所在的路径,搜索范围来自全局环境PATH变量对应的路径. 其他方法: find / -type f -name “useradd” whereis -b useradd PATH的路 ...
Firefox扩展安装
firefox扩展和chrome扩展非常相似,甚至兼容.因总结过chrome扩展的开发,这里不提,本篇谈谈firefox扩展的安装. 1.打包所谓的打包,就是压缩,利用普通的右键压缩文件夹,这样形成 ...

canvas填充样式

一、线性渐变

1、设置线性渐变的填充样式

2、注意点

3，将线性渐变应用到星空

二、径向渐变

1、设置线性渐变的填充样式

2，将径向渐变应用到星空

三、使用图片、画布或者video

1、使用图片创建样式

2、使用画布创建填充样式

3、使用video创建填充样式

四、总结

canvas填充样式的更多相关文章

随机推荐

热门专题