詳解HTML5 canvas繪圖基本使用方法

發(fā)布時(shí)間：2018-01-29 16:17:17 作者：詩(shī)淵

這篇文章主要介紹了詳解HTML5 canvas繪圖基本使用方法的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

<canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，實(shí)際上，這個(gè)標(biāo)簽和其他的標(biāo)簽一樣，其特殊之處在于該標(biāo)簽可以獲取一個(gè)CanvasRenderingContext2D對(duì)象，我們可以通過(guò)JavaScript腳本來(lái)控制該對(duì)象進(jìn)行繪圖。

<canvas></canvas>只是一個(gè)繪制圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在<canvas>>元素上繪圖主要有三步：

獲取<canvas>元素對(duì)應(yīng)的DOM對(duì)象，這是一個(gè)Canvas對(duì)象；
調(diào)用Canvas對(duì)象的getContext()方法，得到一個(gè)CanvasRenderingContext2D對(duì)象；
調(diào)用CanvasRenderingContext2D對(duì)象進(jìn)行繪圖。

繪制線(xiàn)段moveTo()和lineTo()

以下是一個(gè)簡(jiǎn)單的<canvas>繪圖示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas繪圖演示</title>
    <style type="text/css">
        #canvas{
            border: 1px solid #ADACB0;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="300" height="300">
        你的瀏覽器還不支持canvas
    </canvas>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    //設(shè)置對(duì)象起始點(diǎn)和終點(diǎn)
    context.moveTo(10,10);
    context.lineTo(200,200);
    //設(shè)置樣式
    context.lineWidth = 2;
    context.strokeStyle = "#F5270B";
    //繪制
    context.stroke();
</script>
</html>

如果沒(méi)有通過(guò)moveTo()特別指定，lineTo()的起始點(diǎn)是以上一個(gè)點(diǎn)為準(zhǔn)。因此，如果需要重新選擇起始點(diǎn)，則需要通過(guò)moveTo()方法。如果需要對(duì)不同的線(xiàn)段設(shè)置樣式，則需要通過(guò)context.beginPath()重新開(kāi)啟一條路徑，下面是一個(gè)示例：

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    //設(shè)置對(duì)象起始點(diǎn)和終點(diǎn)
    context.beginPath();
    context.moveTo(100,100);
    context.lineTo(700,100);
    context.lineTo(700,400);
    context.lineWidth = 2;
    context.strokeStyle = "#F5270B";
    //繪制
    context.stroke();

    context.beginPath();
    context.moveTo(100,200);//這里的moveTo換成lineTo效果是一樣的
    context.lineTo(600,200);
    context.lineTo(600,400);
    //strokeStyle的顏色有新的值，則覆蓋上面設(shè)置的值
    //lineWidth沒(méi)有新的值，則按上面設(shè)置的值顯示
    context.strokeStyle = "#0D25F6";
    //繪制
    context.stroke();
</script>

繪制矩形rect()、fillRect()和strokeRect()

context.rect( x , y , width , height )：只定義矩形的路徑；
context.fillRect( x , y , width , height )：直接繪制出填充的矩形；
context.strokeRect( x , y , width , height )：直接繪制出矩形邊框；

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    //使用rect方法
    context.rect(10,10,190,190);
    context.lineWidth = 2;
    context.fillStyle = "#3EE4CB";
    context.strokeStyle = "#F5270B";
    context.fill();
    context.stroke();

    //使用fillRect方法
    context.fillStyle = "#1424DE";
    context.fillRect(210,10,190,190);

    //使用strokeRect方法
    context.strokeStyle = "#F5270B";
    context.strokeRect(410,10,190,190);

    //同時(shí)使用strokeRect方法和fillRect方法
    context.fillStyle = "#1424DE";
    context.strokeStyle = "#F5270B";
    context.strokeRect(610,10,190,190);
    context.fillRect(610,10,190,190);
</script>

這里需要說(shuō)明兩點(diǎn)：第一點(diǎn)就是stroke()和fill()繪制的前后順序，如果fill()后面繪制，那么當(dāng)stroke邊框較大時(shí)，會(huì)明顯的把stroke()繪制出的邊框遮住一半；第二點(diǎn)：設(shè)置fillStyle或strokeStyle屬性時(shí)，可以通過(guò)“rgba(255,0,0,0.2)”的設(shè)置方式來(lái)設(shè)置，這個(gè)設(shè)置的最后一個(gè)參數(shù)是透明度。

另外還有一個(gè)跟矩形繪制有關(guān)的：清除矩形區(qū)域：context.clearRect(x,y,width,height)。

接收參數(shù)分別為：清除矩形的起始位置以及矩形的寬和長(zhǎng)。

在上面的代碼中繪制圖形的最后加上：

context.clearRect(100,60,600,100);

可以得到以下效果：

繪制五角星

通過(guò)對(duì)五角星分析，我們可以確定各個(gè)頂點(diǎn)坐標(biāo)的規(guī)律，這里需要注意的一點(diǎn)是：在canvas中，Y軸的方向是向下的。

相應(yīng)代碼如下：

var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    //設(shè)置是個(gè)頂點(diǎn)的坐標(biāo)，根據(jù)頂點(diǎn)制定路徑
    for (var i = 0; i < 5; i++) {
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,
                        -Math.sin((18+i*72)/180*Math.PI)*200+200);
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,
                        -Math.sin((54+i*72)/180*Math.PI)*80+200);
    }
    context.closePath();
    //設(shè)置邊框樣式以及填充顏色
    context.lineWidth="3";
    context.fillStyle = "#F6F152";
    context.strokeStyle = "#F5270B";
    context.fill();
    context.stroke();

最后效果：

線(xiàn)條屬性

除了上面用到的lineWidth屬性，線(xiàn)條還有以下幾個(gè)屬性：

lineCap 屬性設(shè)置或返回線(xiàn)條末端線(xiàn)帽的樣式，可以取以下幾個(gè)值：

“butt” 向線(xiàn)條的每個(gè)末端添加平直的邊緣（默認(rèn)）；
“round” 向線(xiàn)條的每個(gè)末端添加圓形線(xiàn)帽；
“square” 向線(xiàn)條的每個(gè)末端添加正方形線(xiàn)帽。

lineJoin 屬性當(dāng)兩條線(xiàn)交匯時(shí)設(shè)置或返回所創(chuàng)建邊角的類(lèi)型，可以取以下幾個(gè)值：

“miter” 創(chuàng)建尖角(默認(rèn))；
“bevel” 創(chuàng)建斜角；
“round” 創(chuàng)建圓角。

miterLimit 屬性設(shè)置或返回最大斜接長(zhǎng)度（默認(rèn)為10）。斜接長(zhǎng)度指的是在兩條線(xiàn)交匯處內(nèi)角和外角之間的距離。只有當(dāng) lineJoin 屬性為 “miter” 時(shí)，miterLimit 才有效。

var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    //測(cè)試lineCap屬性
    //設(shè)置基準(zhǔn)線(xiàn)便于觀(guān)察
    context.moveTo(10,10);
    context.lineTo(10,200);
    context.moveTo(200,10);
    context.lineTo(200,200);
    context.lineWidth="1";
    context.stroke();
    //butt
    context.beginPath();
    context.moveTo(10,50);
    context.lineTo(200,50);
    context.lineCap="butt";
    context.lineWidth="10";
    context.stroke();
    //round
    context.beginPath();
    context.moveTo(10,100);
    context.lineTo(200,100);
    context.lineCap="round";
    context.lineWidth="10";
    context.stroke();
    //square
    context.beginPath();
    context.moveTo(10,150);
    context.lineTo(200,150);
    context.lineCap="square";
    context.lineWidth="10";
    context.stroke();

    //測(cè)試linJoin屬性
    //miter
    context.beginPath();
    context.moveTo(300,50);
    context.lineTo(450,100);
    context.lineTo(300,150);
    context.lineJoin="miter";
    context.lineWidth="10";
    context.stroke();
    //round
    context.beginPath();
    context.moveTo(400,50);
    context.lineTo(550,100);
    context.lineTo(400,150);
    context.lineJoin="round";
    context.lineWidth="10";
    context.stroke();
    //square
    context.beginPath();
    context.moveTo(500,50);
    context.lineTo(650,100);
    context.lineTo(500,150);
    context.lineJoin="bevel";
    context.lineWidth="10";
    context.stroke();

    //測(cè)試miterLimit屬性
    context.beginPath();
    context.moveTo(700,50);
    context.lineTo(850,100);
    context.lineTo(700,150);
    context.lineJoin="miter";
    context.miterLimit="2";
    context.lineWidth="10";
    context.strokeStyle="#2913EC";
    context.stroke();

各屬性的不同取值的效果如下：

填充樣式

前面用到的fillStyle和strokeStyle除了設(shè)置顏色外，還能設(shè)置其他填充樣式，這里以fillStyle為例：

線(xiàn)性漸變

使用步驟

（1）var grd = context.createLinearGradient( xstart , ystart, xend , yend )創(chuàng)建一個(gè)線(xiàn)性漸變，設(shè)置起始坐標(biāo)和終點(diǎn)坐標(biāo)；
（2）grd.addColorStop( stop , color )為線(xiàn)性漸變添加顏色，stop為0~1的值；
（3）context.fillStyle=grd將賦值給context。

徑向漸變

該方法與線(xiàn)性漸變使用方法類(lèi)似，只是第一步接收的參數(shù)不一樣

var grd = context.createRadialGradient(x0 , y0, r0 , x1 , y1 , r1 );接收起始圓心的坐標(biāo)和圓半徑以及終點(diǎn)圓心的坐標(biāo)和圓的半徑。

位圖填充

createPattern( img , repeat-style )使用圖片填充，repeat-style可以取repeat、repeat-x、repeat-y、no-repeat。

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

    //線(xiàn)性漸變
    var grd = context.createLinearGradient( 10 , 10, 100 , 350 );
    grd.addColorStop(0,"#1EF9F7");
    grd.addColorStop(0.25,"#FC0F31");
    grd.addColorStop(0.5,"#ECF811");
    grd.addColorStop(0.75,"#2F0AF1");
    grd.addColorStop(1,"#160303");
    context.fillStyle = grd;
    context.fillRect(10,10,100,350);

    //徑向漸變
    var grd = context.createRadialGradient(325 , 200, 0 , 325 , 200 , 200 );
    grd.addColorStop(0,"#1EF9F7");
    grd.addColorStop(0.25,"#FC0F31");
    grd.addColorStop(0.5,"#ECF811");
    grd.addColorStop(0.75,"#2F0AF1");
    grd.addColorStop(1,"#160303");
    context.fillStyle = grd;
    context.fillRect(150,10,350,350);

    //位圖填充
    var bgimg = new Image();
    bgimg.src = "background.jpg";
    bgimg.onload=function(){
        var pattern = context.createPattern(bgimg, "repeat");
        context.fillStyle = pattern;
        context.strokeStyle="#F20B0B";
        context.fillRect(600, 100, 200,200);
        context.strokeRect(600, 100, 200,200);
    };

效果如下：

圖形變換

平移：context.translate(x,y)，接收參數(shù)分別為原點(diǎn)在x軸方向平移x，在y軸方向平移y。

縮放：context.scale(x,y)，接收參數(shù)分別為x坐標(biāo)軸按x比例縮放，y坐標(biāo)軸按y比例縮放。

旋轉(zhuǎn)：context.rotate(angle)，接收參數(shù)是坐標(biāo)軸旋轉(zhuǎn)的角度。

需要說(shuō)明的是，對(duì)圖形進(jìn)行變化后，接下來(lái)的一次繪圖是緊接著上一次的狀態(tài)的，所以如果需要回到初始狀態(tài)，要用到context.save();和context.restore();來(lái)保存和恢復(fù)當(dāng)前狀態(tài):

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

    //translate()
    context.save();
    context.fillStyle = "#1424DE";
    context.translate(10,10);
    context.fillRect(0,0,200,200);
    context.restore();

    //scale()
    context.save();
    context.fillStyle = "#F5270B";
    context.scale(0.5,0.5);
    context.fillRect(500,50,200,200);
    context.restore();
    //rotate()

    context.save();
    context.fillStyle = "#18EB0F";
    context.rotate(Math.PI / 4);
    context.fillRect(300,10,200,200);
    context.restore();

效果如下：

另外一個(gè)跟圖形變換相關(guān)的是：矩陣變換：context.transform(a, b, c, d, e, f, g)。參數(shù)的含義如下：
a 水平縮放 ( 默認(rèn)為1 )
b 水平傾斜 ( 默認(rèn)為 0 )
c 垂直傾斜 ( 默認(rèn)為 0 )
d 垂直縮放 ( 默認(rèn)為1 )
e 水平位移 ( 默認(rèn)為 0 )
f 垂直位移 ( 默認(rèn)為 0 )
讀者可以自行驗(yàn)證其各個(gè)參數(shù)的效果，這里就不一一介紹了。

繪制曲線(xiàn)

跟繪制曲線(xiàn)的有四個(gè)函數(shù)，分別是：

下面是幾個(gè)arc()函數(shù)的幾個(gè)示例：

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

    context.strokeStyle = "#F22D0D";
    context.lineWidth = "2";
    //繪制圓
    context.beginPath();
    context.arc(100,100,40,0,2*Math.PI);
    context.stroke();

    //繪制半圓
    context.beginPath();
    context.arc(200,100,40,0,Math.PI);
    context.stroke();

    //繪制半圓,逆時(shí)針
    context.beginPath();
    context.arc(300,100,40,0,Math.PI,true);
    context.stroke();

    //繪制封閉半圓
    context.beginPath();
    context.arc(400,100,40,0,Math.PI);
    context.closePath();
    context.stroke();

效果如下：

context.arcTo(x1,y1,x2,y2,r); 在畫(huà)布上創(chuàng)建介于兩個(gè)切線(xiàn)之間的弧/曲線(xiàn)。接收的參數(shù)含義：

參數(shù)	含義
x1	弧的控制點(diǎn)的 x 坐標(biāo)
y1	弧的控制點(diǎn)的 y 坐標(biāo)
x2	弧的終點(diǎn)的 x 坐標(biāo)
y2	弧的終點(diǎn)的 y 坐標(biāo)
r	弧的半徑

這里需要注意的是arcTo函數(shù)繪制的曲線(xiàn)的起始點(diǎn)需要通過(guò)moveTo(）函數(shù)來(lái)設(shè)置，下面利用arcTo函數(shù)繪制一個(gè)圓角矩形：

function createRoundRect(context , x1 , y1 , width , height , radius)
    {
        // 移動(dòng)到左上角
        context.moveTo(x1 + radius , y1);
        // 添加一條連接到右上角的線(xiàn)段
        context.lineTo(x1 + width - radius, y1);
        // 添加一段圓弧
        context.arcTo(x1 + width , y1, x1 + width, y1 + radius, radius);
        // 添加一條連接到右下角的線(xiàn)段
        context.lineTo(x1 + width, y1 + height - radius);
        // 添加一段圓弧
        context.arcTo(x1 + width, y1 + height , x1 + width - radius, y1 + height , radius);
        // 添加一條連接到左下角的線(xiàn)段
        context.lineTo(x1 + radius, y1 + height); 
        // 添加一段圓弧
        context.arcTo(x1, y1 + height , x1 , y1 + height - radius , radius);
        // 添加一條連接到左上角的線(xiàn)段
        context.lineTo(x1 , y1 + radius);
        // 添加一段圓弧
        context.arcTo(x1 , y1 , x1 + radius , y1 , radius);
        context.closePath();
    }
    // 獲取canvas元素對(duì)應(yīng)的DOM對(duì)象
    var canvas = document.getElementById('mc');
    // 獲取在canvas上繪圖的CanvasRenderingContext2D對(duì)象
    var context = canvas.getContext('2d');
    context.lineWidth = 3;
    context.strokeStyle = "#F9230B";
    createRoundRect(context , 30 , 30 , 400 , 200 , 50);
    context.stroke();

效果如下：

context.quadraticCurveTo(cpx,cpy,x,y);繪制二次貝塞曲線(xiàn)，參數(shù)含義如下：

參數(shù)	含義
cpx	貝塞爾控制點(diǎn)的 x 坐標(biāo)
cpy	貝塞爾控制點(diǎn)的 y 坐標(biāo)
x	結(jié)束點(diǎn)的 x 坐標(biāo)
y	結(jié)束點(diǎn)的 y 坐標(biāo)

曲線(xiàn)的開(kāi)始點(diǎn)是當(dāng)前路徑中最后一個(gè)點(diǎn)。如果路徑不存在，那么請(qǐng)使用 beginPath() 和 moveTo() 方法來(lái)定義開(kāi)始點(diǎn)。

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 繪制三次貝塞爾曲線(xiàn)，參數(shù)如下：

參數(shù)	含義
cp1x	第一個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
cp1y	第一個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
cp2x	第二個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
cp2y	第二個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
x	結(jié)束點(diǎn)的 x 坐標(biāo)
y	結(jié)束點(diǎn)的 y 坐標(biāo)

文字渲染

與文本渲染有關(guān)的主要有三個(gè)屬性以及三個(gè)方法：

屬性	描述
font	設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性
textAlign	設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式
textBaseline	設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線(xiàn)

方法	描述
fillText()	在畫(huà)布上繪制”被填充的”文本
strokeText()	在畫(huà)布上繪制文本（無(wú)填充）
measureText()	返回包含指定文本寬度的對(duì)象

上述的屬性和方法的基本用法如下：

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

    context.font="bold 30px Arial"; //設(shè)置樣式
    context.strokeStyle = "#1712F4";
    context.strokeText("歡迎來(lái)到我的博客！",30,100);

    context.font="bold 50px Arial"; 
    var grd = context.createLinearGradient( 30 , 200, 400 , 300 );//設(shè)置漸變填充樣式
    grd.addColorStop(0,"#1EF9F7");
    grd.addColorStop(0.25,"#FC0F31");
    grd.addColorStop(0.5,"#ECF811");
    grd.addColorStop(0.75,"#2F0AF1");
    grd.addColorStop(1,"#160303");
    context.fillStyle = grd;
    context.fillText("歡迎來(lái)到我的博客！",30,200);

    context.save();
    context.moveTo(200,280);
    context.lineTo(200,420);
    context.stroke();
    context.font="bold 20px Arial"; 
    context.fillStyle = "#F80707";
    context.textAlign="left";
    context.fillText("文本在指定的位置開(kāi)始",200,300);
    context.textAlign="center";
    context.fillText("文本的中心被放置在指定的位置",200,350);
    context.textAlign="right";
    context.fillText("文本在指定的位置結(jié)束",200,400);
    context.restore();

    context.save();
    context.moveTo(10,500);
    context.lineTo(500,500);
    context.stroke();
    context.fillStyle="#F60D0D";
    context.font="bold 20px Arial"; 
    context.textBaseline="top";
    context.fillText("指定位置在上面",10,500);
    context.textBaseline="bottom";
    context.fillText("指定位置在下面",150,500);
    context.textBaseline="middle";
    context.fillText("指定位置居中",300,500);
    context.restore();


    context.font="bold 40px Arial"; 
    context.strokeStyle = "#16F643";
    var text = "歡迎來(lái)到我的博客！";
    context.strokeText("歡迎來(lái)到我的博客！",10,600);
    context.strokeText("上面字符串的寬度為："+context.measureText(text).width,10,650);

效果如下：

其他屬性和方法

陰影繪制：

shadowColor 設(shè)置或返回用于陰影的顏色。
shadowBlur 設(shè)置或返回用于陰影的模糊級(jí)別（數(shù)值越大越模糊）。
shadowOffsetX 設(shè)置或返回陰影與形狀的水平距離。
shadowOffsetY 設(shè)置或返回陰影與形狀的垂直距離。

我們?yōu)橹袄L制的五角星添加一下陰影

var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    //設(shè)置是個(gè)頂點(diǎn)的坐標(biāo)，根據(jù)頂點(diǎn)制定路徑
    for (var i = 0; i < 5; i++) {
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,
                        -Math.sin((18+i*72)/180*Math.PI)*200+200);
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,
                        -Math.sin((54+i*72)/180*Math.PI)*80+200);
    }
    context.closePath();
    //設(shè)置邊框樣式以及填充顏色
    context.lineWidth="3";
    context.fillStyle = "#F6F152";
    context.strokeStyle = "#F5270B";
    context.shadowColor = "#F7F2B4";
    context.shadowOffsetX = 30;
    context.shadowOffsetY = 30;
    context.shadowBlur = 2;
    context.fill();
    context.stroke();

效果如下：

圖形組合：

globalAlpha：設(shè)置或返回繪圖的當(dāng)前 alpha 或透明值

該方法主要是設(shè)置圖形的透明度，這里就不具體介紹。

globalCompositeOperation：設(shè)置或返回新圖像如何繪制到已有的圖像上，該方法有以下屬性值：

值	描述
source-over	在目標(biāo)圖像上顯示源圖像（默認(rèn)）
source-atop	在目標(biāo)圖像頂部顯示源圖像。源圖像位于目標(biāo)圖像之外的部分是不可見(jiàn)的
source-in	在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像之內(nèi)的源圖像部分會(huì)顯示，目標(biāo)圖像是透明的
source-out	在目標(biāo)圖像之外顯示源圖像。只有目標(biāo)圖像之外的源圖像部分會(huì)顯示，目標(biāo)圖像是透明的
destination-over	在源圖像上顯示目標(biāo)圖像
destination-atop	在源圖像頂部顯示目標(biāo)圖像。目標(biāo)圖像位于源圖像之外的部分是不可見(jiàn)的
destination-in	在源圖像中顯示目標(biāo)圖像。只有源圖像之內(nèi)的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的
destination-out	在源圖像之外顯示目標(biāo)圖像。只有源圖像之外的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的
lighter	顯示源圖像 + 目標(biāo)圖像
copy	顯示源圖像。忽略目標(biāo)圖像
xor	使用異或操作對(duì)源圖像與目標(biāo)圖像進(jìn)行組合

下面是一個(gè)小示例，可以通過(guò)點(diǎn)擊改變組合效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖形組合</title>
    <style type="text/css">
        #canvas{
            border: 1px solid #1C0EFA;
            display: block;
            margin: 20px auto;
        }
        #buttons{
            width: 1000px;
            margin: 5px auto;
            clear:both;
        }
        #buttons a{
            font-size: 18px;
            display: block;
            float: left;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="1000" height="800">
            你的瀏覽器還不支持canvas
    </canvas>
    <div id="buttons">
        <a href="#">source-over</a>
        <a href="#">source-atop</a>
        <a href="#">source-in</a>
        <a href="#">source-out</a>
        <a href="#">destination-over</a>
        <a href="#">destination-atop</a>
        <a href="#">destination-in</a>
        <a href="#">destination-out</a>
        <a href="#">lighter</a>
        <a href="#">copy</a>
        <a href="#">xor</a>
    </div>
</body>
<script type="text/javascript">

window.onload = function(){
    draw("source-over");

    var buttons = document.getElementById("buttons").getElementsByTagName("a");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function(){
            draw(this.text);
            return false;
        };
    }
};

    function draw(compositeStyle){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

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

        //draw title
        context.font = "bold 40px Arial";
        context.textAlign = "center";
        context.textBasedline = "middle";
        context.fillStyle = "#150E0E";
        context.fillText("globalCompositeOperation = "+compositeStyle, canvas.width/2, 60);

        //draw a rect
        context.fillStyle = "#F6082A";
        context.fillRect(300, 150, 500, 500);

        //draw a triangle
        context.globalCompositeOperation = compositeStyle;
        context.fillStyle = "#1611F5";
        context.beginPath();
        context.moveTo(700, 250);
        context.lineTo(1000,750);
        context.lineTo(400, 750);
        context.closePath();
        context.fill();
    }

</script>
</html>

讀者可以點(diǎn)擊標(biāo)簽來(lái)觀(guān)察不同的組合效果，效果如下：

剪輯區(qū)域：

clip()方法從原始畫(huà)布中剪切任意形狀和尺寸。

提示：一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)（不能訪(fǎng)問(wèn)畫(huà)布上的其他區(qū)域）。您也可以在使用 clip() 方法前通過(guò)使用 save() 方法對(duì)當(dāng)前畫(huà)布區(qū)域進(jìn)行保存，并在以后的任意時(shí)間對(duì)其進(jìn)行恢復(fù)（通過(guò) restore() 方法）

以下是用一個(gè)圓去截取一個(gè)矩形的示例：

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

    context.beginPath();
    context.fillStyle = "#0C0101";
    context.fillRect(0,0,canvas.width,canvas.height);

    context.beginPath();
    context.fillStyle = "#FFFDFD";
    context.arc(400,400,100,0,2*Math.PI);
    context.fill();
    context.clip();

    context.beginPath();
    context.fillStyle = "#F60825";
    context.fillRect(200, 350, 400,50);

除了上述的屬性的和方法，還有以下等方法：

drawImage()：向畫(huà)布上繪制圖像、畫(huà)布或視頻。

toDataURL() ：保存圖形

isPointInPath()：如果指定的點(diǎn)位于當(dāng)前路徑中，則返回 true，否則返回 false。

這里就不逐個(gè)舉例說(shuō)明了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

Tag：繪圖 Canvas HTML5

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

詳解HTML5 canvas繪圖基本使用方法

相關(guān)文章

最新評(píng)論

文章分類(lèi)

大家感興趣的內(nèi)容

最近更新的內(nèi)容

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

詳解HTML5 canvas繪圖基本使用方法

相關(guān)文章

最新評(píng)論

文章分類(lèi)

大家感興趣的內(nèi)容

最近更新的內(nèi)容

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕