canvas畫(huà)布

<canvas>是html5新增的畫(huà)布元素，為了客戶(hù)端矢量圖形而設(shè)計(jì)的，它自己沒(méi)有行為(僅僅是一個(gè)畫(huà)圖的容器)，但是定義了一個(gè) API 支持腳本化客戶(hù)端繪圖操作。canvas默認(rèn)的寬為300px，高為150px，你可以直接在該對(duì)象上指定寬度和高度，但是，其大多數(shù)功能都可以通過(guò) CanvasRenderingContext2D 對(duì)象獲得。 這是通過(guò) Canvas 對(duì)象的 getContext() 方法并且把直接量字符串 "2d" 作為唯一的參數(shù)傳遞給它而獲得的。

html代碼
//添加canvas標(biāo)簽
<canvas width=500 height=500></canvas>
js代碼
// 獲得canavs元素
var canvas =document.getElementById('myCanvas');
// 獲得canvas上下文對(duì)象
var ctx = canvas.getContext('2d');

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 標(biāo)簽。 注釋?zhuān)篒nternet Explorer 8 以及更早的版本不支持 <canvas> 標(biāo)簽。

一、路徑繪制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        #canvas {
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
<canvas id="canvas" height="300" width="300"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.moveTo(100, 100);//移動(dòng)到( 100，100)坐標(biāo)點(diǎn),作為起點(diǎn)
    ctx.lineTo(200, 100); //從當(dāng)前點(diǎn)繪制直線到(200，100)(上一個(gè)點(diǎn)即為當(dāng)前點(diǎn))
    ctx.lineTo(200, 200);
    ctx.stroke();//繪制路徑
</script>
</body>
</html>
效果圖

在上述js代碼中加入 ctx.closePath();創(chuàng)建一條從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑。

//js代碼
var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
        ctx.moveTo(100, 100);
        ctx.lineTo(200, 100);
        ctx.lineTo(200, 200);
        ctx.closePath();
        ctx.stroke();
效果圖

另外，可以填加 lineWidth 設(shè)置線段寬度，fill(),進(jìn)行填充，默認(rèn)填充色為黑色。當(dāng)存在fill()時(shí)，代碼種無(wú) ctx.closePath()也可以進(jìn)行填充。

   //js代碼
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.moveTo(100, 100);
    ctx.lineTo(200, 100);
    ctx.lineTo(200, 200);
    ctx.closePath();
    ctx.fill();
效果圖

說(shuō)明

1.fill和stroke方法都是作用在當(dāng)前的所有子路徑。
2.完成一條路徑后要重新開(kāi)始另一條路徑時(shí)必須使用beginPath()方法, beginPath開(kāi)始子路徑的一個(gè)新的集合。
例如：

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle= 'red';
    ctx.moveTo(100, 100);
    ctx.lineTo(200, 100);
    ctx.closePath();
    ctx.stroke();
    ctx.strokeStyle='green';
    ctx.moveTo(100, 200);
    ctx.lineTo(200, 200);
    ctx.stroke();
未添加closePath
添加closePath

二、文本

繪制實(shí)心文本、空心文本。

var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.font = "30px Arial";
    ctx.fillText("Hello World", 10, 50);
    ctx.strokeText("Hello World", 10, 100);
文本

三、矩形

1、ctx.rect(x, y, dx, dy);
    x,y在矩形左上點(diǎn)的坐標(biāo)，dx，dy為矩形的寬高。
    需配合ctx.fill() ctx.stroke()使用
2、ctx.fillRect(x, y, dx, dy);
   效果同
   ctx.rect(x, y, dx, dy);
   ctx.fill();
3、ctx.strokeRect(x, y, dx, dy);
   效果同
   ctx.rect(x, y, dx, dy);
   ctx.stroke();
4、ctx.clearRect(x, y, dx, dy);
   擦除某一區(qū)域，x,y為需擦除區(qū)域的左上點(diǎn)的坐標(biāo)，dx，dy寬高。

var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.fillRect(50, 50, 50, 100);
    ctx.strokeRect(200,50,50,100);
    ctx.clearRect(50,50,30,30);
效果圖

四、弧形

arc(x, y, r, 起始弧度, 結(jié)束弧度,弧形的?方向(0或1) )
0順時(shí)針 ，1逆時(shí)針
默認(rèn)為0

各位置的度數(shù)
   var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.arc(100,100,50,0,Math.PI/180*90);
    ctx.stroke();
順時(shí)針 90度圓弧
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.arc(100,100,50,0,Math.PI/180*270);
    ctx.stroke();
順時(shí)針 270度圓弧
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.arc(100,100,50,0,Math.PI/180*90,1);
    ctx.stroke();
逆時(shí)針 0-90 圓弧

五、圖片填充

createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")

    //html代碼
    <canvas id="canvas" width="500" height="500"></canvas>
    <img src="" style="visibility: hidden">
    //js代碼
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    window.onload = function () {
        var Img = document.getElementsByTagName('img')[0];
        ctx.fillStyle = ctx.createPattern(Img, 'repeat');//設(shè)置為重復(fù)
        ctx.fillRect(0, 0, 500, 400);//填充范圍
    };
效果圖

六、漸變效果

漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來(lái)設(shè)置Canvas漸變：

createLinearGradient(x,y,x1,y1) - 線條漸變
x、y為起點(diǎn)坐標(biāo)，x1、y1為終點(diǎn)坐標(biāo)
createRadialGradient(x,y,r,x1,y1,r1) -徑向漸變
x,y x1,y1為圓點(diǎn)，r、r1位半徑
addColorStop()方法指定顏色停止，參數(shù)使用坐標(biāo)來(lái)描述，可以是0至1.
使用漸變，設(shè)置fillStyle或strokeStyle的值為 漸變，然后繪制形狀，如矩形，文本，或一條線。

使用createLinearGradient

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var bg = ctx.createLinearGradient(0, 0, 0, 500);
    bg.addColorStop(0, '#000');
    bg.addColorStop(0.5, 'red');
    bg.addColorStop(1, '#fff');
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, 300, 300);
效果圖
  var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var gradient_font = ctx.createLinearGradient(0, 0, canvas.width, 0);
    gradient_font.addColorStop(0,'blue');
    gradient_font.addColorStop(0.3,'red');
    gradient_font.addColorStop(0.6,'yellow');
    gradient_font.addColorStop(1,'green');
    ctx.font = '40px Arial';
    ctx.fillStyle = gradient_font;
    ctx.fillText('hello world', 50, 150);
文字漸變效果

使用createRadialGradient

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var bg = ctx.createRadialGradient(150, 150, 50, 150, 150, 110);
    bg.addColorStop(0, '#fff');
    bg.addColorStop(0.5, 'pink');
    bg.addColorStop(1, '#fff');
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, 300, 300);
效果圖
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像 畫(huà)布是...
    EndEvent閱讀 781評(píng)論 0贊 1
  • 一、簡(jiǎn)介 HTML5 中的定義：“它是依賴(lài)分辨率的位圖畫(huà)布，你可以在 canvas 上面繪制任何圖形，甚至加載照片...
    destiny0904閱讀 10,824評(píng)論 1贊 4
  • 1、canvas 是H5 新加入的標(biāo)簽 用來(lái)在頁(yè)面中繪制圖形 一般稱(chēng)之為畫(huà)布。2、canvas的寬高要以屬性的形...
    Simon_s閱讀 591評(píng)論 0贊 0
  • canvas用途 游戲 小游戲 圖表 報(bào)表 如 Charts插件 炫酷效果 banner 模擬器、圖形編輯器 等...
    飛魚(yú)_JS閱讀 973評(píng)論 0贊 2
  • 一：canvas簡(jiǎn)介 1.1什么是canvas？ ①：canvas是HTML5提供的一種新標(biāo)簽 ②：HTML5 ...
    GreenHand1閱讀 4,878評(píng)論 2贊 32

友情鏈接更多精彩內(nèi)容