canvas一週一練 -- canvas基礎學習

時間 2019-11-12

標籤 canvas 一週 1周基礎學習简体版

原文原文鏈接

從上個星期開始，耳朵就一直在生病，裏面長了個疙瘩，腫的一碰就疼，不能吃飯不能嗨 (┳＿┳)……在此提醒各位小夥伴，最近天氣炎熱，必定要注意防暑上火，病來如山倒呀~ javascript

接下來我正在喝着5塊一顆的藥學習canvas……css

canvas（畫布）是html5新增的標籤元素，用來定義圖形，好比圖表和其餘圖像。<canvas>標籤只是圖形容器，必須使用腳本（一般爲javascript）來繪製圖形。html

canvas與svg的區別 html5

canvas是HTML5提供的新元素<canvas>，而svg存在的歷史要比canvas久遠，已經有十幾年了。svg並非html5專有的標籤，最初svg是用xml技術（超文本擴展語言，能夠自定義標籤或屬性）描述二維圖形的語言。

首先，從它們的功能上來說，canvas能夠看作是一個畫布。其繪製出來的圖形爲標量圖，所以，能夠在canvas中引入jpg或png這類格式的圖片，在實際開發中，大型的網絡遊戲都是用canvas畫布作出來的，而且canvas的技術如今已經至關的成熟。
另外，咱們喜歡用canvas來作一些統計用的圖表，如柱狀圖曲線圖或餅狀圖等。而svg，所繪製的圖形爲矢量圖，因此其用法上受到了限制。由於只能繪製矢量圖，因此svg中不能引入普通的圖片，由於矢量圖的不會失真的效果，在項目中咱們會用來作一些動態的小圖標。
可是因爲其本質爲矢量圖，能夠被無限放大而不會失真，這很適合被用來作地圖，而百度地圖就是用svg技術作出來的。

另外從技術發麪來說canvas裏面繪製的圖形不能被引擎抓取，如咱們要讓canvas裏面的一個圖片跟隨鼠標事件：canvas.onmouseover=function(){}。而svg裏面的圖形能夠被引擎抓取，支持事件的綁定。
另外canvas中咱們繪製圖形一般是經過JavaScript來實現，svg更多的是經過標籤來來實現，如在svg中繪製正矩形形就要用<rect>，這裏咱們不能用屬性style="width:XXX;height:XXX;"來定義。
我再來介紹一個svg的js庫：TWO.JS。其中包含two.js和three.js前者用於繪製二維圖形，後者用於繪製三維圖形。TWO.JS能夠支持三種格式，svg（默認）、canvas、和WEBGL。固然也能夠在普通div中引入。

要從同一圖形的一個<canvas>標記中移除元素，須要擦掉從新繪製；而svg很容易編輯，只要從其描述中移除元素便可。

以上是以前在別人博客中看到的，因此先引用過來，待以後熟練掌握canvas，svg再寫本身的心得體會。

具體請參考 http://blog.csdn.net/helloword_chen/article/details/49788309



一、基本語法

<canvas id="canvasMain" width="800" height="600" >
    您的瀏覽器不支持canvas
</canvas>

當沒有設置寬度和高度的時候，canvas會初始化寬度爲300px和高度爲150px；當瀏覽器不支持canvas標籤的時候，會顯示其中的文字。java

在canvas座標體系中，以左上角爲座標原點，向右爲x軸正方向，向下爲y軸正方向，以下圖：canvas

進行繪製須要獲取canvas的上下文環境context，以後調用API進行圖像繪製數組

var canvas = document.getElementById("canvasMain"),
    ctx = canvas.getContext("2d");

替換內容是在不支持<canvas>標籤的瀏覽器中展現的。也能夠經過檢測getContext()方法的存在來判斷是否支持（有些瀏覽器會爲html規範以外的元素建立默認的html元素對象）瀏覽器

var canvas = document.getElementById("canvasMain");
if(canvas.getContext("2d")) {
    var ctx = canvas.getContext("2d");
    // drawing code here
} else {
    // canvas-unsupported code here
}

導出在<canvas>元素上繪製的圖像，接收一個參數，即圖像的MIME類型格式。若繪製到畫布上的圖像來自不一樣域，該方法會報錯網絡

var canvas = document.getElementById("canvasMain");
if(canvas.getContext) {
    //取得圖像的數據URI
    var imgURI = canvas.toDataURL('image/png');
    //顯示圖像
    var image =  document.createElement('img');
    image.src = imgURI;
    document.body.appendChild(image);        
}

二、2D上下文app

填充和描邊

　　填充：用指定的樣式（顏色、漸變、圖像）填充圖形；描邊：在圖形的邊緣畫線兩個屬性分別是fillStyle strokeStyle，屬性的值能夠是字符串、漸變對象或模式對象

繪製矩形

　　繪製矩形方法：fillRect() strokeRect() clearRect() 參數依次爲：矩形x座標、y座標、寬度、高度

var drawing = document.getElementById('drawing');
if(drawing.getContext) {
    var context = drawing.getContext('2d');
    context.strokeStyle = 'rgba(0, 0, 255, 0.5)';//描邊屬性
    context.fillStyle = 'pink';//填充屬性

    context.lineWidth = 3; //描邊線條寬度
    context.lineCap = 'square';//線條末端形狀（butt平頭、round圓頭、square方頭）
    context.lineJoin = 'round';//線條相交的方式（round圓交、bevel斜交、miter斜接）

    context.fillRect(10, 10, 50, 50);//填充矩形
    context.fillStyle = 'green';
    context.fillRect(30, 30, 50, 50);
    context.strokeRect(100, 10, 50, 50);//描邊矩形
    context.clearRect(40, 40, 15, 15);//清除畫布上的矩形區域             
}

繪製路徑

　　closePath()繪製一條鏈接到路徑起點的線條

　　 fill()填充路徑 stroke()描邊路徑 clip()在路徑上建立一個剪切區域

　　isPointInPath(x,y)判斷畫布上的某一點是否位於路徑上

var drawing = document.getElementById('drawing');
if(drawing.getContext) {
            /*繪製路徑*/
            var context = drawing.getContext('2d');
            context.strokeStyle = 'pink';
            context.beginPath();//開始繪製新路徑
            //繪製外圓
            context.arc(100, 100, 99, 0, 2*Math.PI, false);//參數依次爲圓心座標x、y、半徑、起始角度(用弧度表示)、結束角度、起始角度是否按逆時針方向計算（flase爲順時針）
            context.moveTo(194, 100);//將繪圖遊標移動到（x,y）,不畫線
            //繪製內圓
            context.arc(100, 100, 94, 0, 2*Math.PI, false);
            //繪製分針
            context.moveTo(100, 100);
            context.lineTo(100, 25);//從上一點開始繪製一條直線，到（x,y）爲止
            //繪製時針
            context.moveTo(100, 100);
            context.lineTo(35, 100);
            //繪製文本
            context.font = 'bold 14px Arial';//表示文本樣式、大小、字體
            context.textAlign = 'center';//文本對齊方式（start、end、left、right、center）,建議用start、end代替left、right
            context.textBaseline = 'middle';//文本的基線(top、hanging、middle、alphabetical、ideopgraphic、bottom)
            context.fillText('12', 100, 20);//參數：文本，文本的座標
            //描邊路徑
            context.stroke();
            //額外練習
            context.moveTo(230, 10);
            //arcTo(x1,y1,x2,y2,radius):從上一點開始繪製一條弧線，到(x2,y2)爲止，並以給定的半徑穿過（x1,y1）
            context.arcTo(280, 60, 330, 10, 50);
            //bezierCurveTo(c1x,c1y,c2x,c2y,x,y):從上一點開始繪製一條曲線，到(x,y)爲止，並以(c1x,c1y)(c2x,c2y)爲控制點
            context.bezierCurveTo(210, 70, 290, 90, 300, 100);
            context.moveTo(320, 10);
            //quadraticCurveTo(cx,cy,x,y):從上一點開始繪製一條二次曲線，到(x,y)爲止，並以(cx,cy)爲控制點
            context.quadraticCurveTo(420, 100, 400, 10);
            //rect(x,y,width,height):從點(x,y)開始繪製矩形，此方法繪製的是矩形路徑而不是獨立的形狀
            context.rect(450, 10, 50, 50);
            context.stroke();
}

繪製文本

　　fillText()繪製文本 strokeText()爲文本描邊參數：文本字符串、x座標、y座標、可選的最大像素寬度

變換

var drawing = document.getElementById('drawing');
if(drawing.getContext) {
            //變換
            var context = drawing.getContext('2d');
            context.strokeStyle = 'rgba(0, 0, 255, 0.5)';
            context.beginPath();
            context.arc(100, 100, 99, 0, 2*Math.PI, false);
            context.moveTo(194, 100);
            context.arc(100, 100, 94, 0, 2*Math.PI, false);
            //變換原點
            context.translate(100, 100);//將座標原點移動到該點
            //旋轉錶針
            context.rotate(1);//圍繞原點旋轉圖像angle弧度
            //繪製分針
            context.moveTo(0, 0);
            context.lineTo(0, -80);
            //繪製時針
            context.moveTo(0, 0);
            context.lineTo(-65, 0);
            context.stroke();

            context.rotate(-1);
            context.fillStyle = 'rgba(0, 0, 255, 0.5)';
            context.save();//保存上下文狀態，只保存繪圖上下文的設置和變換，不會保存繪圖上下文的內容
            context.fillStyle = 'pink';
            context.translate(-100, -100);
            context.save();
            context.fillStyle = 'green';
            context.fillRect(220, 10, 50, 50);

            context.restore();//返回以前保存的設置
            context.fillRect(280, 10, 50, 50);

            context.restore();
            context.fillRect(340, 10, 50, 50);
}

繪製圖像

　　drawImage()還可傳入<canvas>元素做爲第一個參數，表示把另外一個畫布內容繪製到當前畫布上。

　　可能遇到的問題：drawImage()圖片不顯示在畫布上，緣由多是你取圖片的時候，此時圖片尚未加載出來

window.onload = function(){
        var drawing = document.getElementById('drawing');
        if(drawing.getContext) {
            //圖像
            var context = drawing.getContext('2d');
            var image = document.images[0];
            //參數依次表示爲：圖像元素、源圖像x座標、y座標、目標的寬度、高度
            context.drawImage(image, 0, 0, 150, 250);
            //參數依次表示爲：圖像元素、源圖像x座標、y座標、源圖像寬度、高度、目標圖像x座標、y座標、目標圖像寬度、高度
            context.drawImage(image, 100, 300, 500, 600, 0, 0, 70, 80);
        }
};

陰影、漸變、模式

　　模式與漸變同樣，都是從畫布原點（0,0）開始的，將填充樣式設置爲模式對象，只表示在某個特定區域內顯示重複的圖像，而不是從某個位置開始繪製重複的圖像。

　　 createPattern（）第一個參數也能夠是<video>元素，或者是另外一個<canvas>元素

window.onload = function(){
        var drawing = document.getElementById('drawing');
        if(drawing.getContext) {
            //陰影
            var context = drawing.getContext('2d');
            context.shadowColor = 'rgba(0, 0, 0, 0.5)';//陰影顏色，默認黑色
            context.shadowOffsetX = 5;//x軸方向的陰影偏移量，默認0
            context.shadowOffsetY = 5;//y軸方向的陰影偏移量，默認0
            context.shadowBlur = 4;//模糊的像素數，默認0

            context.fillStyle = 'rgba(0, 0, 255, 0.5)';
            context.fillRect(10, 10, 50, 50);
            context.fillStyle = 'pink';
            context.fillRect(30, 30, 50, 50);

            //漸變
            var gradient = context.createLinearGradient(100, 10, 130, 130);//建立線性漸變，返回CanvasGradient對象的實例。參數：起點x座標、y座標、終點x座標、y座標
            gradient.addColorStop(0, 'white');//指定色標，參數：色標位置（0到1之間的數字，0表示開始的顏色，1爲結束的顏色）、css顏色值
            gradient.addColorStop(1, 'black');

            context.fillStyle = gradient;
            context.fillRect(100, 10, 50, 50);

            var createLinearGradient = function(context, x, y, width, height) {
                return context.createLinearGradient(x, y, x+width, y+height);
            };

            var gradientNew = createLinearGradient(context, 180, 10, 50, 50);
            gradientNew.addColorStop(0, 'red');
            gradientNew.addColorStop(1, 'green');
            context.fillStyle = gradientNew;
            context.fillRect(180, 10, 50, 50);

            var gradientRound = context.createRadialGradient(275, 35, 10, 275, 35, 30);//徑向漸變,參數：起點圓的圓心、半徑，終點圓的圓心、半徑
            gradientRound.addColorStop(0, 'pink');
            gradientRound.addColorStop(1, 'blue');
            context.fillStyle = gradientRound;
            context.fillRect(250, 10, 50, 50);

            //模式，即重複的圖像，能夠用來填充或描邊圖形
            var image = document.images[0],
                pattern = context.createPattern(image, 'repeat-x');//建立新模式，參數：圖像元素、是否重複（repeat、repeat-x、repeat-y、no-repeat）
            context.fillStyle = pattern;
            context.fillRect(350, 10, 350, 350);
        }
}