Canvas基礎

畫三角形

畫一個顏色爲red，線條爲6的正三角形

<canvas width="800" height="600"></canvas>
複製代碼

width和height不能經過css來設置，不能有單位

//獲取畫布
  var c=document.querySelector("canvas");
  //獲取繪製的對象
  var ctx=c.getContext("2d");
  //設置顏色和width
  ctx.strokeStyle = "red";
  ctx.lineWidth = 6;  // 不須要帶單位
  //開始的位置(橫縱座標)
  ctx.moveTo(100,100);
  ctx.lineTo(50,200);
  ctx.lineTo(150,200);
  ctx.lineTo(100,100); // 閉合直接lineTo固然能夠
  // ctx.closePath();//也能夠採用clothPath閉合路徑,用於畫圖最後一步的合併
  //繪製
  ctx.stroke();
複製代碼

此時正三角形就畫好了，還能夠設置鏈接處的樣式

• 線鏈接方式 lineJoin: round | bevel | miter (默認)
• 線帽（線兩端的結束方式）lineCap: butt(默認值) | round | square

從新畫另外線條的時候須要注意一下

//再畫一條線
 //開始的位置(橫縱座標)
 ctx.moveTo(100, 200);
 //結束的位置
 ctx.lineTo(400, 200);
 //設置線的顏色
 ctx.strokeStyle = "green";
 //設置線的寬度
 ctx.lineWidth = 10;
 //繪製
 ctx.stroke();
複製代碼

一、此時兩次stroke()的繪製會致使第一次的stroke的繪製帶有陰影，那是由於第二次至關於將第一次又進行了臨摹
二、也能夠在每一個畫圖後使用beginPath()重置路徑的方法

線性漸變

• var grd=ctx.createLinearGradient(x0,y0,x1,y1);

var c=document.querySelector("canvas");
 var ctx=c.getContext("2d");
 //建立漸變的方案
 //起始位置的橫縱座標,結束位置的橫縱座標
 var lgd=ctx.createLinearGradient(100,100,500,100);
 //添加漸變的顏色
 // addColorStop(offse,color);
 // 中漸變的開始位置和結束位置介於0-1之間，0表明開始，1表明結束。中間能夠設置任何小數
 lgd.addColorStop(0,"red");
 lgd.addColorStop(0.2,"green");
 lgd.addColorStop(0.5,"blue");
 lgd.addColorStop(1,"yellow");
 //把漸變的方案給strokeStyle
 ctx.strokeStyle=lgd;

 ctx.moveTo(100,100);
 ctx.lineTo(500,100);
 ctx.lineWidth=20;
 ctx.stroke();
複製代碼

徑向漸變

• ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)

//開始的橫縱座標,半徑,結束的橫縱座標,半徑
  var rgd=ctx.createRadialGradient(200,150,50,200,150,100);
  //添加漸變的顏色
  rgd.addColorStop(0,"red");
  rgd.addColorStop(0.5,"green");
  rgd.addColorStop(1,"blue");
  ctx.fillRect(0,0,200,150);
複製代碼

非零環繞

• 以射線爲半徑順時針旋轉，相交的邊同向記爲+1，反方向記爲-1，若是相加的區域等於0，則不填充。
• 非零區域填充

//逆時針繪製外面的矩形
  ctx.moveTo(100,100);
  ctx.lineTo(100,300);
  ctx.lineTo(300,300);
  ctx.lineTo(300,100);
  ctx.closePath();
  //順時針繪製裏面的矩形
  ctx.moveTo(150,150);
  ctx.lineTo(250,150);
  ctx.lineTo(250,250);
  ctx.lineTo(150,250);
  ctx.closePath();

  ctx.stroke();
  //中間的區域被填充顏色
  ctx.fillStyle="red";
  ctx.fill();
複製代碼

繪製虛線

• ctx.setLineDash(segments);
• segments
  • 一個Array數組。一組描述交替繪製線段和間距（座標空間單位）長度的數字。 若是數組元素的數量是奇數， 數組的元素會被複制並重復。例如， [5, 15, 25] 會變成 [5, 15, 25, 5, 15, 25]。

ctx.moveTo(100,50);
  ctx.lineTo(400,50);
  //虛線:參數是一個數組:線的長度是20,空白的地方也是20
  //ctx.setLineDash([20,20]);
  ctx.setLineDash([10,20,10]);
  ctx.stroke();
複製代碼

繪製動畫矩形

//  繪製一個矩形
  //  ctx.fillStyle="green";
  //  //繪製矩形
  //  ctx.fillRect(100,100,100,200);
  //  ctx.stroke();
  
  // 將矩形動起來的思路就是使用setInterval
    var x = 0;//開始的座標
  //每次移動的步數
  var step = 5;
  //標記(設置矩形向右移動後再回來)
  var i = 1;
  setInterval(function () {
    //清理畫布 必需要先清理，不然就是重繪
    ctx.clearRect(0, 0, c.width, c.height);

    ctx.fillStyle = "green";//顏色
    ctx.fillRect(x, 100, 100, 200);//橫縱座標,寬和高
    ctx.stroke();

    x += step * i;//控制橫座標的
    if (x > c.width - 100) {
      i = -1;//標記設置爲-1
    } else if (x <= 0) {
      i = 1;//i的值,不是x
    }
  }, 10);
複製代碼

繪製文本

• 繪製填充文本 content.fillText(文本的內容,x,y)
• 繪製鏤空文本 content.strokeText()
• 設置文字大小： content.font="20px 微軟雅黑"
  備註： 該屬性設置文字大小，必須按照cssfont屬性的方式設置
• 文字水平對齊方式【文字在圓心點位置的對齊方式】 content.textalign="left | right | center"
• 文字垂直對齊方式 content.textBaseline="top | middle | bottom | alphabetic(默認)"
• 文字陰影效果
  • ctx.shadowColor="red"; 設置文字陰影的顏色
  • ctx.ShadowOffsetX=值; 設置文字陰影的水平偏移量
  • ctx.shadowOffsetY=值; 設置文字陰影的垂直偏移量
  • ctx.shadowBlur=值; 設置文字陰影的模糊度

繪製十字線做爲參考
ctx.moveTo(300, 0);
ctx.lineTo(300, 400);
ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, 200);
ctx.lineTo(600,200);
ctx.stroke();

// 開始繪製文本
//繪製文本 :是像素 和字體（）
ctx.font="50px 宋體";
//設置文本的對齊方式
ctx.textAlign="center";//left|right|center
//設置文本的上下對齊方式
ctx.textBaseline="middle";//top|bottom|alphabetic(默認)
//設置陰影的顏色
ctx.shadowColor="red";
//水平方向偏移量
ctx.shadowOffsetX=15;
ctx.shadowOffsetY=5;
//陰影的模糊度
ctx.shadowBlur=5;
//參數1:文字內容，參數2:橫座標,參數3；縱座標
//鏤空的效果
// ctx.strokeText("你好",300,200);
//填充文本
ctx.fillText("你好",300,200);
複製代碼

繪製圖片

將圖片繪製到畫布的指定位置

• void ctx.drawImage(image, dx, dy);
• void ctx.drawImage(image, dx, dy, dWidth, dHeight);
• void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

//繪製圖片
var img=document.createElement("img");
img.src="image/2.jpg";
//圖片和畫圖發生關係,才能夠繪製這個圖片
//圖片加載
img.onload=function () {
  //將圖片繪製到畫布的指定位置
  content.drawImage(圖片對象,x,y);
  ctx.drawImage(img,0,0);  // 從畫布的0，0位置開始繪製 
  
  //將圖片繪製到指定區域大小的位置  x,y指的是矩形區域的位置，width和height指的是矩形區域的大小
  content.drawImage(圖片對象,x,y,width,height);
  ctx.drawImage(img,100,100,200,100);   // 在規定矩形範圍以內畫圖
 
  //將圖片的指定區域繪製到指定矩形區域內
  content.drawImage(圖片對象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
  sx,sy 指的是要從圖片哪塊區域開始繪製，swidth，sheight 是值 截取圖片區域的大小
  dx,dy 是指矩形區域的位置，dwidth,dheight是值矩形區域的大小
  ctx.drawImage(img,180,50,350,170,100,100,350,170);  //圖片對象,圖片選擇的橫縱座標,圖片的寬和高,畫圖的橫縱座標,圖片顯示的寬和高
};
複製代碼

• 解決圖片繪製到某一個區域的按原比例縮放繪製：
  繪製寬：繪製高==原始寬：原始高

// 不失真的公式
  var w=img.width
  var h=img.height
  var drawH=200*h/w
  ctx.drarImage(img,100,50,200,drawH)
複製代碼

繪製弧度

• ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
• x 圓弧中心（圓心）的 x 軸座標。 y 圓弧中心（圓心）的 y 軸座標。 radius 圓弧的半徑。 startAngle 圓弧的起始點， x軸方向開始計算，單位以弧度表示。 endAngle 圓弧的終點， 單位以弧度表示。 anticlockwise 可選 可選的Boolean值 ，若是爲 true，逆時針繪製圓弧，反之，順時針繪製。

//繪製弧度:圓心座標,半徑,開始的弧度,結束的弧度,默認順時針(false)
  ctx.arc(200,150,50,Math.PI/2,2*Math.PI,false);
  ctx.stroke();
複製代碼

• 0度角在哪？
  以圓心爲中心向右爲0角 順時針爲正，逆時針爲負
• 角度 和 弧度的關係： 角度:弧度= 180:pi
• 特殊值
  • 0度 = 0弧度
  • 30度 = π/6 (180度的六分之一)
  • 45度 = π/4
  • 60度 = π/3
  • 90度 = π/2
  • 180度 = π
  • 360度 = 2π
• 繪製圓上任意點：
  • x=ox+r*cos( 弧度 )
  • y=oy+r*sin( 弧度 )
  • ox: 圓心的橫座標
  • oy: 圓心的縱座標
  • r： 圓的半徑

旋轉

//設置畫布原點平移 經過該方法能夠將原點的位置進行從新設置。
  ctx.translate(100, 100);
  
  //旋轉的弧度
  ctx.rotate( Math.PI/2 );//90度
複製代碼

• 注意

  • translate(x,y) 中不能設置一個值

  • 與moveTo(x,y) 的區別：

    moveTo(x,y) 指的是將畫筆的落筆點的位置改變，而座標系中的原點位置並無發生改變

    translate(x,y) 是將座標系中的原點位置發生改變

縮放

ctx.scale(2, 0.5);//參數1:相對於原來的橫座標的縮放值,參數2:相對於原來的縱座標的縮放值
複製代碼