參考:Canvas 基本用途
HTML:
<canvas id="tutorial" width="150" height="150"></canvas>
若是沒有設定 width
和 height
屬性,畫布寬預設值為 300px、高預設值為 150px
不支持canvas的可以使用圖片、文字說明
<canvas id="stockGraph" width="150" height="150">
您的系统不支持此程序!
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>
還有種檢查方法是通過檢查getContext()方法,是否存在來檢查是否支持canvas
如下所示:
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
onload方法
画画布之前需要现在页面加载完毕(onload)之后才开始绘制;如下所示:
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
一旦页面加载完毕后,便会执行draw这个方法
1:矩形
rect(x,y,width,height)
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";//fillStyle是填充颜色
ctx.fillRect (10, 10, 55, 50);//fillRect 是绘制填充矩形
ctx.strokeStyle = "rgba(0, 0, 200, 0.5)";//strokeStyle 是边框颜色
ctx.strokeRect (0, 30, 55, 50);//strokeRect 是绘制描边矩形
}
}
结果为:
参数:
- fillRect(x, y, width, height):填充矩形
- strokeRect(x, y, width, height):描边矩形
- clearRect(x, y, width, height):清除指定矩形區域內的內容,使其變為全透明。
x,y为起始坐标值,width为绘制的宽度,height绘制的高度
如下:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle='rgb(200,0,0)';
ctx.fillRect(0,0,100,100);
ctx.clearRect(20,20,60,60);
ctx.strokeStyle='rgb(200,0,0)';
ctx.strokeRect(30,30,40,40);
显示结果:
路径绘制
- beginPath():产生新路径
- closePath():闭合路径
- stroke():画出图形边框
- fill():填充图形内容区域
- moveTo(x,y):開始點
- lineTo(x,y):画直线
当为填充(fill())时,图形会自动闭合,不用使用closePath();但是stroke()并不可以自动闭合,所以,需要加上closePath()
画一个三角形:
stroke()
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,45);
ctx.lineTo(45,0);
ctx.lineTo(0,0);
ctx.strokeStyle = 'rgb(200,0,0)';
ctx.stroke();
结果为:
fill()
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,45);
ctx.lineTo(45,0);
ctx.lineTo(0,0);
ctx.fillStyle = 'rgb(200,0,0)';
ctx.fill()
結果:
笑臉:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,false);
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,false);
ctx.closePath();
ctx.stroke()
結果爲:
2:弧形
arc(x, y, radius, startAngle, endAngle, anticlockwise)
- x, y代表圓心座標點
- radius代表半徑
- startAngle, endAngle分別代表沿著弧形曲線上的起始點與結束點的弧度
- 弧度測量是相對於x軸,anticlockwise為true代表逆時針作圖、false代表順時針作圖。
arc()方法用的是弧度(radians)而非角度(degrees),如果要在弧度與角度間換算,可以利用以下javascript程式碼: radians = (Math.PI/180) * degrees.
3:貝茲曲線(Bezier curve)與二次曲線(quadratic curve)
二次與三次貝茲曲線(Bézier curves)是另一種可用來構成複雜有機圖形的路徑。
- quadraticCurveTo(cp1x,cp1y,x,y):從目前起始點畫一條二次貝茲曲線到x, y指定的終點,控制點由cp1x, cp1y指定。
- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y):從目前起始點畫一條三次貝茲曲線到x, y指定的終點,控制點由(cp1x, cp1y)和(cp2x, cp2y)指定。
二次和三次的差別可以從右圖看出;貝茲曲線的起始和終點以藍點標示,其中二次貝茲曲線只有一個控制點(如紅點標示)而三次貝茲曲線有兩個控制點。
二次和三次貝茲曲線都用x, y參數定義終點座標,然後用cp1x, xp1y定義第一個控制點座標、cp2x, xp2y定義第二個控制點座標。
二次貝茲曲線示列:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(60,0);
ctx.lineTo(10,50);
ctx.quadraticCurveTo(5,70,20,75);
ctx.quadraticCurveTo(40,80,50,65);
ctx.quadraticCurveTo(60,100,25,110);
ctx.lineTo(25,115);
ctx.lineTo(95,115);
ctx.lineTo(95,110);
ctx.quadraticCurveTo(60,100,70,65);
ctx.quadraticCurveTo(80,80,100,75);
ctx.quadraticCurveTo(115,70,110,50);
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
ctx.lineTo(110,50);
ctx.lineTo(60,0);
ctx.fill();
結果:
4:圖片
var mycas = document.getElementById('mycas'),
ctx = mycas.getContext('2d'),
img = new Image(); // Create new img element
img.src = 'myImage.png'; // Set source path
img.onload = function(){
ctx.drawImage(img, 50, 50, 150, 158)
}
data:URL嵌入影像
另一個載入影像的方法是利用data: url,透過data URL可以直接將影像定義成Base64編碼的字串,然後嵌入程式碼之中.
var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
data URL的好處:
- 立即產生影像而不用再和伺服器連線
- 好處是這樣便能夠將影像包入你的CSS, JavaScript, HTML之中,讓影像更具可攜性.
壞處:影像將不會被快取起來,而且對大影像來說編碼後的URL會很長.
drawImage(image,x,y,width,height):圖像從x,y開始繪製
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
};
img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
}
結果:
圖像縮放
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
for (var i=0;i<4;i++){
for (var j=0;j<3;j++){
ctx.drawImage(img,j*50,i*38,50,38);
}
}
};
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
}
結果:
5:顏色
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
6:透明度
globalAlpha = transparencyValue
允許值介於0.0(全透明)到1.0(不透明)。一旦設定後,之後畫布上畫的所有圖形的不透明度都會套用此設定值。預設值為1.0。
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";
7:線條樣式
lineWidth=value
設定線條寬度。lineCap=type
設定線條結尾的樣式。lineJoin=type
設定線條和線條間接合處的樣式。miterLimit=value
限制當兩條線相交時交接處最大長度;所謂交接處長度(miter length)是指線條交接處內角頂點到外角頂點的長度。
8:lineCap
這個屬性決定線條端點的樣式,總共有三種樣式可選:
butt:
線條端點樣式為方形round:
線條端點樣式為圓形square:
增加寬同線條寬度、高線條寬度一半的的方塊於線條端點
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var lineCap = ['butt','round','square'];
// Draw guides
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(140,10);
ctx.moveTo(10,140);
ctx.lineTo(140,140);
ctx.stroke();
// Draw lines
ctx.strokeStyle = 'black';
for (var i=0;i<lineCap.length;i++){
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(25+i*50,10);
ctx.lineTo(25+i*50,140);
ctx.stroke();
}
}
结果为:
9:渐变
createLinearGradient(x1,y1,x2,y2)
:產生一個線性漸層物件,其漸層起始點為(x1, y1)、終點為(x2, y2)。
createRadialGradient(x1,y1,r1,x2,y2,r2)
:產生一個放射狀漸層物件,第一個圓之圓心落在(x1, y1)、半徑為r1,第一個圓之圓心落在(x2, y2)、半徑為r2。
gradient.addColorStop(position, color):
- gradient:为渐变物件
- position:介于0-1的
- color:为设定的颜色
如:
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
完整demo代码:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// Create gradients
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#ff8177');
lingrad.addColorStop(0.3, '#ff867a');
lingrad.addColorStop(0.6, '#b12a5b');
lingrad.addColorStop(1, '#f99185');
// assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
// draw shapes
ctx.fillRect(10,10,130,130);
}
结果为:
10:渐变
阴影四特性:
- shadowOffsetX = float
- shadowOffsetY = float
- shadowBlur = float
- shadowColor = color
栗子:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "#F60";
ctx.fillText("三吉彩花", 5, 30);
}
结果为:
11:画布状态储存与复原
save()
:儲存現階段畫布完整狀態。restore()
:復原最近一次儲存的畫布狀態。
每一次使用save后,就会把画布状态保存在堆叠(stack)中;
画布状态包含:
- 曾經套用過的變形效果,如translate, rotate和scale(稍後說明)。
strokeStyle
,fillStyle
,globalAlpha
,lineWidth
,lineCap
,lineJoin
,miterLimit
,shadowOffsetX
,shadowOffsetY
,shadowBlur
,shadowColor
,globalCompositeOperation
屬性的屬性值- 目前截圖路徑(稍後說明)。
我們可以呼叫save()的次數不限,而每一次呼叫restore(),最近一次儲存的畫布狀態便會從堆疊中被取出,然後還原畫布到此畫布狀態。