HTML5 Canvas學習

時間  2019-11-19
標籤 html5 html canvas 學習 欄目 HTML5 简体版
原文   原文鏈接

一．SVG(Scalable Vector Graphics,可伸縮矢量圖形)和Canvas對比

 

1.Canvas本質上是一個位圖畫布，其上繪製的圖形是不可縮放的，不能像SVG那樣能夠被放大縮小。javascript

 

2.用Canvas繪製出的對象不屬於頁面DOM結構或者任何命名空間——這點被認爲是一個缺陷。SVG圖像卻能夠在不一樣的分辨率下流暢的縮放，而且支持單擊檢測（能檢測到鼠標點擊了圖像上的哪一個點）。html

 

雖然Canvas有這些不足，可是Canvas API有兩方面的優點能夠彌補：首先，不須要將所繪製圖像中的每一個圖元當作對象存儲，所以執行性能很是好。java

 

其次，在其餘編程語言現有的優秀二維繪製API的基礎上實現Canvas API相對來講比較簡單。畢竟，二鳥在林不如一鳥在手。編程

 

二．Canvas概述

 

1.canvas是什麼

 

<canvas></canvas>canvas

 

默認建立一塊矩形區域，寬300，高150像素，可設置border style使其可見。數組

 

使用canvas編程，首先要獲取其上下文（context）.而後在上下文中執行動做，最後將這些動做應用到上下文中。瀏覽器

 

2.Canvas座標

 

Canvas座標從左上角開始，x軸水平右延伸，y軸垂直下延伸。左上角座標爲x=0,y=0，稱做原點。編程語言

 

3.瀏覽器支持

 

檢測瀏覽器支持代碼：函數

 

try{

document.createElement(「canvas」).getContext(「2d」);

document.getElementById(「support」).innerHTML=

「HTML5 Canvas is supported in your browser.」;

}catch(e){

document.getElementById(「support」).innerHTML=

「HTML5 Canvas is not supported in your browser.」;

}

 

 

不支持時替代內容寫法：性能

 

<canvas>

Update your browser to enjoy canvas!

</canvas>

 

 

4.在頁面中加入canvas

 

1.畫直線

 

html

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>canvas</title>

    <script  type="text/javascript" src="../js/canvas/canvas1.js"></script>

</head>

<body>

<canvas id="diagonal" width="200" height="200" style="border:1px solid;">

    update your browser to support canvas

</canvas>

</body>

</html>

 

 

Js:

 

window.addEventListener("load",drawcans,true);

 

function drawcans() {

    var canvs = document.getElementById("diagonal");

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

    context.beginPath();

    context.moveTo(70, 140);

    context.lineTo(140, 70);

    context.stroke();

}

 

 

2.變換

 

平移，縮放，旋轉等

 

下面的js代碼使用translate函數實現上面一樣的對角線

 

function drawDiagonal(){

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

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

    context.save() ;

    context.translate(70,140);

    context.beginPath();

    context.moveTo(0,0) ;

    context.lineTo(70,-70);

    context.stroke() ;

    context.restore();

}

 

 

3.路徑

 

  •  moveTo(x,y):不繪製，只是將當前位置移動到新的目標座標（x,y)。

 

  • lineTo(x,y):不只將當前位置移動到新座標（x,y）,並且在兩個座標之間畫一條直線。

 

簡而言之，上面兩個函數的區別在於，moveTo就像是提起畫筆，移動到新位置，而lineTo告訴canvas用畫筆從紙上的舊座標畫條直線到新座標。不過，提醒你們，無論調用那個，都不會真正畫出圖形，由於尚未調用stroke或者fill函數。目前只是在定義路徑的位置，以便後面繪製時使用。

 

closePath會將起始座標自動做爲目標座標，和lineTo很像。還會通知canvas當前的圖形已經閉合或者造成了徹底封閉的區域，這對未來填充和描邊很是有用。

 

   

context.beginPath();

    context.moveTo(-25,-50);

    context.lineTo(-10,-80);

    context.lineTo(-20,-80);

    context.lineTo(-5,-110);

    context.lineTo(-15,-110);

 

    context.lineTo(0,-140);

 

    context.lineTo(15,-110);

    context.lineTo(5,-110);

    context.lineTo(20,-80);

    context.lineTo(10,-80);

    context.lineTo(25,-50);

    context.closePath() ;

 

 

以上js代碼能夠繪製出一個松樹的樹冠。

 

4.描邊樣式

 

//設置使用描邊樣式

//加寬線條

context.lineWidth=4;

//平滑路徑接合點

context.lineJoin = 'round';

//將顏色改爲棕色

context.strokeStyle='#663300';

//最後繪製樹冠

 context.stroke();

 

 

5.填充樣式

 

  

 //填充樹顏色爲綠色

    context.fillStyle="#339900";

   context.fill();

 

 

 

 

6.填充矩形區域

 

//將填充色設爲棕色

  context.fillStyle=’#663300’;

//填充用做樹幹的矩形區域

   context.fillRect(-5,-50,10,50);

 

 

7.繪製曲線

 

 

 

 

   context.save();

    context.translate(-10,350);

    context.beginPath();

    //第一條曲線向右上方彎曲

    context.moveTo(0,0);

    context.quadraticCurveTo(170,-50,260,-190);

 

    //第二條曲線向右下方彎曲

    context.quadraticCurveTo(310,-250,410,-250);

 

    //使用棕色的粗線條來揮之路徑

    context.strokeStyle="#663300";

    context.lineWidth=20;

    context.stroke();

    context.restore();

 

 

 

 

8.在canvas中插入圖片

 

//保證圖片加載完才調用

var Bark = new Image();

Bark.src=」bark.jpg」;

Bark.onload = function(){

drawTrails();

}

 

 

 

 

在canvas中顯示圖像

 

context.drawImage(Bark,-5,-50,10,50);

 

 

9.漸變

 

步驟：

 

①　建立漸變對象

 

②　爲漸變對象設置顏色，指明過分方式

 

③　在context上爲填充樣式或者描邊樣式設置漸變

 

  

 var trunkGradient = context.createLinearGradient(-5,-50,5,-50);

    trunkGradient.addColorStop(0,'#663300');

    trunkGradient.addColorStop(0.4,'#996600');

    trunkGradient.addColorStop(1,'#552200');

    context.fillStyle=trunkGradient;

    context.fillRect(-5,-50,10,50);

    //接下來，建立垂直漸變，以用做樹冠在樹幹上的投影

    var canopyShadow = context.createLinearGradient(0,-50,0,0);

    canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)');

    //方向垂直向下，漸變色在很短的距離內迅速漸變爲徹底透明，這段長度以外的樹幹上沒有投影

    canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)');

 

    //在樹幹上填充投影漸變

    context.fillStyle=canopyShadow;

    context.fillRect(-5,-50,10,50);

 

 

10.背景圖

 

使用createPattern函數替代以前的drawImage函數

 

var Bark = new Image();

Bark.src=」bark.jpg」;

Bark.onload = function(){

drawTrails();

}

//用背景圖替代棕色的粗線條

context.strokeStyle = context.createPattern(Bark,’repeat’);

context.lineWidth=20;

Context.stroke();

 

 

11.縮放canvas對象

 

 

 //在（130,250）的位置繪製第一棵樹

    context.save();

    context.translate(130,250);

    drawTree(context);

    context.restore();

 

    //在（260,500）的位置繪製第二棵樹

    context.save();

    context.translate(260,500);

 

    //將第二棵樹的寬高分別放大至原來的2倍

    context.scale(2,2);

    drawTree(context);

    context.restore();

 

 

12.Canvas變換

 

   

    context.save();

    //X值隨着Y值的增長而增長，藉助拉伸變換，能夠建立一顆用做陰影的傾斜的數，應用了變換之後，全部座標都與矩陣相乘

    context.transform(1,0,-0.5,1,0,0);

    //在Y軸方向，將陰影的高度壓縮爲原來的60%

    context.scale(1,0.6);

    //使用透明度爲20%的黑色填充樹幹

    context.fillStyle='rgba(0,0,0,0.2)';

    context.fillRect(-5,-50,10,50);

    //使用已有的陰影效果從新繪製樹

    createCanopyPath(context);

    context.fill();

    context.restore();

 

 

 

 

運用上面的全部變換後的圖形：

 

 

 

 

 

13.canvas文本

 

Context對象的文本繪製功能由兩個函數組成：

 

  •  fillText(text,x,y,maxwidth);

 

  • strokeText(text,x,y,maxwidth);

 

Maxwidth是可選的，用於限制字體的大小，它將文字強制收縮到指定尺寸。

 

 

 

 

 

//在canvas上繪製標題文本

    context.save();

    context.font='60px impact';

    //將文本填充爲棕色

    context.fillStyle='#996600';

    //將文本設爲居中對齊

    context.textAlign='center';

    //在canvas頂部中央的位置以大字體的樣式顯示文本

    context.fillText('Merry  Christmas!',200,60,400);

    context.restore();

 

 

最後顯示以下，是否是很歡快的感受，繪製的仍是很不錯的。

 

 

 

14.應用陰影

 

 

 

 

  //設置文字陰影的顏色爲黑色，透明度爲20%

    context.shadowColor ='rgba(0,0,0,0.2)';

    //將陰影向右移動15px,向上移動10px

    context.shadowOffsetX=15;

    context.shadowOffsetY = -10;

    //輕微模糊陰影

    context.shadowBlur=2;

 

 

最終效果圖：

 

三.完整代碼

JS:

 

 window.addEventListener("load",drawTrails,true);
//繪製松樹樹冠
function createCanopyPath(context){
    context.beginPath();
    context.moveTo(-25,-50);
    context.lineTo(-10,-80);
    context.lineTo(-20,-80);
    context.lineTo(-5,-110);
    context.lineTo(-15,-110);

    context.lineTo(0,-140);

    context.lineTo(15,-110);
    context.lineTo(5,-110);
    context.lineTo(20,-80);
    context.lineTo(10,-80);
    context.lineTo(25,-50);
    context.closePath() ;

}
function drawTrails(){
    var canvas = document.getElementById("diagonal");
    var context = canvas.getContext("2d");
    //在（130,250）的位置繪製第一棵樹
    context.save();
    context.translate(130,250);
    drawTree(context);
    context.restore();

    context.save();
    context.translate(-10,350);
    context.beginPath();
    //第一條曲線向右上方彎曲
    context.moveTo(0,0);
    context.quadraticCurveTo(170,-50,260,-190);

    //第二條曲線向右下方彎曲
    context.quadraticCurveTo(310,-250,410,-250);

    //使用棕色的粗線條來揮之路徑
    context.strokeStyle="#663300";
    context.lineWidth=20;
    context.stroke();
    context.restore();
    //在（260,500）的位置繪製第二棵樹
    context.save();
    context.translate(260,500);

    //將第二棵樹的寬高分別放大至原來的2倍
    context.scale(2,2);
    drawTree(context);
    context.restore();

    //在canvas上繪製標題文本
    context.save();
    context.font='60px impact';
    //將文本填充爲棕色
    context.fillStyle='#996600';
    //將文本設爲居中對齊
    context.textAlign='center';
    //在canvas頂部中央的位置以大字體的樣式顯示文本

    //設置文字陰影的顏色爲黑色，透明度爲20%
    context.shadowColor ='rgba(0,0,0,0.2)';
    //將陰影向右移動15px,向上移動10px
    context.shadowOffsetX=15;
    context.shadowOffsetY = -10;
    //輕微模糊陰影
    context.shadowBlur=2;
    context.fillText('Merry  Christmas!',200,60,400);
    context.restore();



}


function drawTree(context){
    context.save();
    var trunkGradient = context.createLinearGradient(-5,-50,5,-50);
    trunkGradient.addColorStop(0,'#663300');
    trunkGradient.addColorStop(0.4,'#996600');
    trunkGradient.addColorStop(1,'#552200');
    context.fillStyle=trunkGradient;
    context.fillRect(-5,-50,10,50);
    //接下來，建立垂直漸變，以用做樹冠在樹幹上的投影
    var canopyShadow = context.createLinearGradient(0,-50,0,0);
    canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
    //方向垂直向下，漸變色在很短的距離內迅速漸變爲徹底透明，這段長度以外的樹幹上沒有投影
    canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)');

    //在樹幹上填充投影漸變
    context.fillStyle=canopyShadow;
    context.fillRect(-5,-50,10,50);

    createCanopyPath(context);
    context.restore() ;


    context.save();
    //設置使用描邊樣式
    context.lineWidth=4;
    context.lineJoin = 'round';
    context.strokeStyle='#663300';
    context.stroke();
    //填充數顏色
    context.fillStyle="#339900";
    context.fill();
    context.restore();

    context.save();
    //X值隨着Y值的增長而增長，藉助拉伸變換，能夠建立一顆用做陰影的傾斜的數，應用了變換之後，全部座標都與矩陣相乘
    context.transform(1,0,-0.5,1,0,0);
    //在Y軸方向，將陰影的高度壓縮爲原來的60%
    context.scale(1,0.6);
    //使用透明度爲20%的黑色填充樹幹
    context.fillStyle='rgba(0,0,0,0.2)';
    context.fillRect(-5,-50,10,50);
    //使用已有的陰影效果從新繪製樹
    createCanopyPath(context);
    context.fill();
    context.restore();

}

HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas</title>
    <script  type="text/javascript" src="../js/canvas/canvas1.js"></script>
</head>
<body>
<canvas id="diagonal" width="410" height="510" style="border:1px solid;">
    update your browser to support canvas
</canvas>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程