Canvas2D基礎

什么是Canvas

<canvas>是H5中最受歡迎的元素，在頁面上劃出一片區域，利用JS在上面畫出圖形，起初由Apple公司提出，各大瀏覽器廠商也對其做了不同程度上的實現。canvas中規定了了2D context和3D context（WebGL），目前絕大部分瀏覽器支持2D context。WebGL的發展還比較緩慢。

基本使用

1、toDataURL() 將畫好的圖像輸出為圖片

//get data URI of the image
var imgURI = drawing.toDataURL("image/png");
//display the image
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);

2、原點是基于canvas元素左上角
3、2D Context的兩個基本繪畫操作 fill and stroke

Rectangles（矩形）

1、fillRect()

image.png

context.fillRect(10, 10, 50, 50);
//draw a blue rectangle that’s semi-transparent
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);

2、strokeRect()

image.png

//draw a red outlined rectangle
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 50, 50);
//draw a blue outlined rectangle that’s semi-transparent
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30, 30, 50, 50);

3、clearRect()

image.png

//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//draw a blue rectangle that’s semi-transparent
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
//clear a rectangle that overlaps both of the previous rectangles
context.clearRect(40, 40, 10, 10);

Drawing Paths

1、如何畫一個表盤

var drawing = document.getElementById("drawing");
//make sure <canvas> is completely supported
if(drawing.getContext) {
   var context = drawing.getContext("2d");
   //start the path
   context.beginPath();
   //draw outer circle
   context.arc(100, 100, 99, 0, 2 * Math.PI, false);
   //draw inner circle
   context.moveTo(194, 100); //將光標移動這個內圓繪制的起點上
   context.arc(100, 100, 94, 0, 2 * Math.PI, false);
   //draw minute hand
   context.moveTo(100, 100);
   context.lineTo(100, 15); // 從最后繪制點到(100,15)繪制一條線
   //draw hour hand
   context.moveTo(100, 100);
   context.lineTo(35, 100);
   //stroke the path
   context.stroke();
}
image.png

2、判斷一個坐標點是否在繪制路線上
context.isPointInPath(100, 100) // true

Drawing Text

1、fillText() 、 strokeText() 后者很少用
2、3個屬性font、 textAlign、 textBaseline
3、Demo


image.png
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);
//start-aligned
context.textAlign = "start";
context.fillText("12", 100, 40);
//end-aligned
context.textAlign = "end";
context.fillText("12", 100, 60);

4、measureText()的使用 可以度量文字大小

// 如果文字的長度大于140，就將字體縮小
var fontSize = 100;
context.font = fontSize + "px Arial";
while(context.measureText("Hello world!").width > 140) {
    fontSize--;
    context.font = fontSize + "px Arial";
}
context.fillText("Hello world!", 10, 10);
context.fillText("Font size is " + fontSize + "px", 10, 50);
image.png

Transformations

  1. 圖像變換方法
    rotate(angle)
    scale(scaleX, scaleY)
    translate(x, y)
    transform(m1_1, m1_2, m2_1, m2_2, dx, dy)
    setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)

  2. 可用translate重新定義原點的位置，
    在畫圓的時候，可將原點位置移動圓心位置，這樣在畫圓定位過程中比較方便

  3. context.rotate 注意是將坐標軸進行旋轉


    image.png

Drawing Images 圖片繪制

  1. 從當前canvasd的坐標(10,10)的位置將圖片插入進來（注意，如果圖片在canvas中裝不下，那么圖片是插入不進來的）
var image = document.images[0];
 context.drawImage(image, 10, 10);
  1. 指定區域內插入 -- 執行在從(10,10)開始，寬90，高90的區域內繪制圖像
context.drawImage(image, 10, 10,90,90)
  1. 將圖像上指定區域的部分 插入 canvas中的指定區域（相當于剪切原圖像上的一部分到canvas中)
//從圖像上(0,10)開始，寬150，高385的區域插入到 canvas中從(0,100)開始，寬40，高60的區域內
context.drawImage(image, 0, 10, 150, 385, 0, 100, 40, 60);
image.png
  1. 注意，如果插入進來的圖片是在別的域名下的，會報錯

shadows 加陰影

DEMO:


image.png
var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = "rgba(0, 0, 0, 0.5)";
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

Gradients 漸變色

  1. 線性漸變


    image.png
var gradient = context.createLinearGradient(30, 30, 80, 80);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

  1. 徑項漸變


    image.png
var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

Patterns 模式

  1. 即圖像的重復模式 ，跟css一樣 “repeat”, “repeat-x”, “repeat-y”, no-repeat”
var context = drawing.getContext("2d");
var image = document.images[0],
    pattern = context.createPattern(image, "repeat");
//draw a rectangle
context.fillStyle = pattern;  // 圖像repeat模式仍然是從(0,0)開始的
context.fillRect(30, 0, 150, 150); // 這里的意思是繪制矩形，并讓圖像repeat模式在該矩形區域顯示，并不是說 圖片repeat是從繪制該矩形的起點開始的，漸變也是如此
image.png

Working with Image Data 圖像原始數據

可以用來做濾鏡效果,詳細可看 www.html5rocks.com/en/tutorials/canvas/imagefilters/

Compositing 合成

兩個圖像之間如何糾纏的，這里舉一個例子，其他雷同


image.png
var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//change the global alpha
context.globalCompositeOperation = "xor";
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

總結

  1. canvas內容就是上面這些了，就好比設計師能用的顏色就那么多，但是將顏色，圖形組合起來，創意真的是無限的，canvas也是如此。
  2. webGL是一個 對OpenGL ES 2.0瀏覽器實現接口，用于3D繪畫，生產階段最好不要用，可用于實驗階段。
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • ??HTML5 添加的最受歡迎的功能就是 元素。這個元素負責在頁面中設定一個區域，然后就可以通過 JavaScri...
    霜天曉閱讀 3,056評論 0贊 2
  • 本章內容 理解 元素 繪制簡單的 2D 圖形 使用 WebGL 繪制 3D 圖形 這個元素負責在頁面中設定一個區域...
    悶油瓶小張閱讀 862評論 0贊 0
  • 一、canvas簡介 參考H5之canvasCanvas是HTML5新增的組件，它就像一塊幕布，可以用JavaSc...
    合肥黑閱讀 6,491評論 0贊 3
  • 一、canvas簡介 1.1 什么是canvas？（了解） 是HTML5提供的一種新標簽 Canvas是一個矩形區...
    J_L_L閱讀 1,552評論 0贊 4
  • 當我們出港時，我的第一次霉運也跟隨而至。海風開始掛起來，海浪升起到非常可怕的地步。之前我從未出過海，我的身體非常的...
    擂鼓人閱讀 204評論 0贊 0