canvas學習總結

canvas

描述

HTML5 < canvas> 標籤用於繪製圖像（通過腳本，通常是 JavaScript）。

不過,< canvas>元素本身並沒有繪製能力（它僅僅是圖形的容器）-必須使用腳本來完成實際的繪圖任務。

getContent()方法可返回一個對象,該對象提供了用於在畫布上繪圖的方法和屬性。

瀏覽器支持情況

Internet Explorer 9、Firefox、Opera、Chrome以及Safari支持< canvas>及其屬性和方法。(Internet Explorer 8以及更早的版本不支持< canvas>元素)

1.canvas設置height、width

1.通過html設置

<canvas id="canvas" width="400" height="400"></canvas>

2.通過js設置

<canvas id="canvas"></canvas>
<script>
var canvas=document.getElementById('canvas');
var cx=canvas.width=400;
var cy=canvas=height=400;
</script>

3.通過css設置

<canvas id="canvas"></canvas>
<style>
#canvas{
    width:400px;
    height:400px;
}
</style>
//使用css來設置寬高的畫,畫布就會按照300*150的比例進行縮放,也就是將300*150的頁面顯示在400*400的容器中

所以儘量使用HTML的width和height屬性或者直接使用js動態設置寬高,不要使用css設置。

獲取Canvas對象

創建好canvas標籤後就要獲取Canvas對象

<canvas id="canvas"></canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');//可在畫布上繪製文本、線條、矩形、圓形。
</script>

在畫布上繪製圓

創建畫布

<canvas id="canvas" width="400" height='400'></canvas>

使用arc()畫圓

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.beginPath()//起始一條路徑或重置當前路徑
context.arc(90,90,50,Math.PI*2,false)// arc(x,y,r,start,stop)
context.strokeStyle="green"//設置或返回用於筆觸的顏色、漸變或模式。
context.stroke()//繪製已定義的路徑。

在畫布上線條

創建畫布

<canvas id="canvas" width="400" height="400"></canvas>

使用moveTo()定義線條開始座標,lineTo()線條結束座標

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.beginPath();
var grd=context.createLinearGradient(0,0,170,0);//createLinearGradient(x0,y0,x1,y1);創建線性漸變對象
grd.grd.addColorStop(0,"green");//規定漸變對象中的顏色和停止位置。
grd.addColorStop(1,"white");
context.moveTo(10,10);
context.lineTo(100,100);
context.lineCap="round"//定義設置或返回線條的結束端點樣式 round圓形 butt默認 square方形
context.lineWidth=10//設置線條寬度
context.strokeStyle=grd
content.stroke()

繪製漸變文本

html

<canvas id="canvas" height="400" width="400"></canvas>

js

var canvas=document.getElementById('canvas');
var context=getContext('2d');
context.beginPath();
var grd=context.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"white");
context.font="30px Arial"//設置或返回文本內容的當前字體屬性。
context.fillStyle=grd
context.fillText("Hello World",10,50);

僅用於個人學習使用