canvas基礎的學習

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再寫自己的心得體會。    具體請參考

1、基本語法

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

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

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

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

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);//清除畫布上的矩形區域             }

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、rightcontext.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();  }

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);  }

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);          }  };

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軸方向的陰影偏移量，默認0context.shadowOffsetY = 5;//y軸方向的陰影偏移量，默認0context.shadowBlur = 4;//模糊的像素數，默認0context.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);          }  }