canvas填充樣式

時間  2019-11-19
標籤 canvas 填充 樣式 简体版
原文   原文鏈接

填充樣式主要針對fillStyle。fillStyle除了能夠賦值爲color，還能夠賦值漸變色，包括線性漸變色和徑向漸變色，仍是和css3裏的內容相似。css

1、線性漸變

一、設置線性漸變的填充樣式

設置線性漸變的填充樣式須要2步驟html

一、設置漸變線段css3

經過2個座標肯定漸變線段，來定義漸變的方向和尺度。canvas

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

二、添加關鍵色ide

stop來決定關鍵色的位置，從0.0到1.0的浮點數表示學習

color來決定關鍵色的顏色spa

linearGradient.addColorStop(stop,color);3d

而後linearGradient變量就能夠做爲fillStyle的值。rest

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); 
}

二、注意點

能夠添加無數個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); 
}
View Code

紅橙黃綠青藍紫七個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();
}
View Code

漸變色能夠用在icon裏等，展現更立體的效果，更逼真，關鍵是肯定好colorStop。

2、徑向漸變

radial Gradient定義在兩個同心圓之間的放射狀漸變。

一、設置線性漸變的填充樣式

一樣使用2步建立：

一、肯定好2個圓環

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

二、添加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); 
}
View Code

 把內圓的半徑增大，

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();
}
View Code

3、使用圖片、畫布或者video

一、使用圖片建立樣式

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);
        
    }
}

二、使用畫布建立填充樣式

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();
}
View Code

 

三、使用video建立填充樣式

createPattern(video,repeat-style);

4、總結

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  有問題歡迎與我討論，共同進步。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程