總結(jié)一些基礎(chǔ)知識(shí)
1. 畫一條直線
- moveTo設(shè)置起點(diǎn)，lineTo設(shè)置下一坐標(biāo)
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
// 設(shè)置狀態(tài)
context.beginPath();
context.moveTo(100, 100);// 起點(diǎn)
context.lineTo(700, 700);// 下一點(diǎn)坐標(biāo)
context.closePath();
context.lineWidth = 10;// 線寬
context.strokeStyle = "#0f0";// 顏色
// 繪制
context.stroke();
}
</script>
- lineCap屬性 - 設(shè)置線段起始位置的樣式击费，取值如下
butt:(default)默認(rèn)值
round:圓頭
square:方頭
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
context.lineWidth = 30;
context.strokeStyle = "tomato";
context.beginPath();
context.moveTo(100, 100);
context.lineTo(400, 100);
context.lineCap = "butt";
context.stroke();
context.beginPath();
context.moveTo(100, 200);
context.lineTo(400, 200);
context.lineCap = "round";
context.stroke();
context.beginPath();
context.moveTo(100, 300);
context.lineTo(400, 300);
context.lineCap = "square";
context.stroke();
// 輔助線
context.lineWidth = 1;
context.beginPath();
context.moveTo(100, 50);
context.lineTo(100, 350);
context.stroke();
context.beginPath();
context.moveTo(400, 50);
context.lineTo(400, 350);
context.stroke();
}
</script>
結(jié)果如下：
lineCap
- lineJoin屬性- 兩條直線相交處的樣式拢蛋，可取值如下：
miter：(default)，尖角蔫巩，miterLimit 默認(rèn)值10,控制尖角的長(zhǎng)度谆棱，只有設(shè)置miter時(shí)生效。
bevel：斜接
round: 圓角
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
context.lineWidth = 50;
context.strokeStyle = "tomato";
context.beginPath();
context.moveTo(300, 300);
context.lineTo(400, 100);
context.lineTo(500, 300);
context.lineJoin = "miter";
context.miterLimit = 10;
context.stroke();
context.beginPath();
context.moveTo(300, 500);
context.lineTo(400, 300);
context.lineTo(500, 500);
context.lineJoin = "bevel";
context.miterLimit = 10;
context.stroke();
context.beginPath();
context.moveTo(300, 700);
context.lineTo(400, 500);
context.lineTo(500, 700);
context.lineJoin = "round";
context.miterLimit = 10;
context.stroke();
}
</script>
示意圖如下：
lineJoin
2. 畫一個(gè)矩形
(1).直接使用連線的方式畫出矩形圆仔。
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100, 100);
context.lineTo(600, 100);
context.lineTo(600, 600);
context.lineTo(100, 600);
context.lineTo(100, 100);//可以省略垃瞧，closePath()會(huì)自動(dòng)封閉圖形
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "#0f0";
context.stroke();
}
</script>
(2).使用context.rect(x, y, width, height)規(guī)劃路徑，這里只規(guī)劃路徑坪郭，不會(huì)繪制个从。
context.fillRect(x, y, width, height), context.strokeRect(x, y, width, height)不但規(guī)劃路徑，還將矩形直接繪制出來(lái)歪沃。
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
drawRect(context, 100, 100, 300, 200, 5, "blue", "red");
drawRect2(context, 250, 200, 300, 200, 5, "blue", "rgba(0, 255, 0, 0.5)");
}
function drawRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){
cxt.beginPath();
cxt.rect(x,y, width, height); // 規(guī)劃路徑
cxt.closePath();
cxt.lineWidth = borderWidth;
cxt.fillStyle = fillColor;
cxt.strokeStyle = borderColor;
cxt.fill();
cxt.stroke();
}
function drawRect2(cxt, x, y, width, height, borderWidth, borderColor, fillColor){
cxt.lineWidth = borderWidth;
cxt.fillStyle = fillColor;
cxt.strokeStyle = borderColor;
cxt.fillRect(x, y, width, height); // 填充
cxt.strokeRect(x, y, width, height);
}
</script>
fillStyle, strokeStyle 可取顏色值如下：
#ffffff 嗦锐、#fff、
rgb(255, 255, 100)沪曙、rgba(100, 100, 100, 0.8)奕污、
hsl(20, 62%, 28%)、 hsla(30, 82%, 45%, 0.6)珊蟀、
red
3. 圖形變換
- 位移：translate(x, y)
- 旋轉(zhuǎn)：rotate(deg)
- 縮放：scale(sx, sy) , sx - x方向縮放倍數(shù)菊值，sy - y方向縮放倍數(shù)。
- 變換矩陣
a c e ???????? a - 水平縮放(1) ;?? b - 水平傾斜(0)
b d f ???????? c - 垂直傾斜(0) ;?? d - 垂直縮放(1)
0 0 1 ???????? e - 水平位移(0);?? f - 垂直位移(0) - 設(shè)置變換矩陣：
transform(a, b, c, d, e, f)
setTransform(a, b, c, d, e, f) 設(shè)置變換后的默認(rèn)值 - canvas狀態(tài)的保存與恢復(fù)
context.save();
context.restore();
<canvas id="canvas" style="border: 1px solid #000;"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
context.save();
context.fillStyle = "red";
context.translate(100, 100);
context.fillRect(0, 0, 400, 400);
context.restore();
context.save();
context.fillStyle = "green";
context.translate(300, 300);
context.fillRect(0, 0, 400, 400);
context.restore();
};
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < 200; i++){
var r = Math.random()*10+10;
var x = Math.random()*canvas.width;
var y = Math.random()*canvas.height;
var a = Math.random()*360;
drawStar(context, x, y, r, a)
}
};
function drawStar(cxt, x, y, R, rot){
var rot = rot || 0;
cxt.fillStyle = "#fb3";
cxt.strokeStyle = "#fd5";
cxt.lineWidth = 3;
cxt.save();
cxt.transform(R, 0, 0, R, x, y);
// cxt.translate(x, y);
cxt.rotate(rot/180*Math.PI);
// cxt.scale(R, R);
starPath(cxt);
cxt.fill();
cxt.stroke();
cxt.restore();
}
function starPath(cxt){
cxt.beginPath();
for(var i = 0; i < 5; i ++){
cxt.lineTo(Math.cos((18 + i*72 ) / 180 * Math.PI),
-Math.sin((18 + i*72) / 180 * Math.PI) );
cxt.lineTo(Math.cos((54 + i*72) / 180 * Math.PI) * 0.5,
-Math.sin((54 + i*72 ) / 180 * Math.PI) * 0.5);
}
cxt.setTransform(1, 0, 0, 1, 0, 0);//清除上一次的影響
cxt.closePath();
}
</script>
4. fillStyle - 線性漸變&徑向漸變
- 線性漸變
//step1
var grd = context.createLinearGradient(xstart, ystart, xend, yend);
//step2
grd.addColorStop(stop, color);
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
var linearGrad = context.createLinearGradient(0, 0, 800, 800);
linearGrad.addColorStop(0.0, 'white');
linearGrad.addColorStop(0.25, 'yellow');
linearGrad.addColorStop(0.5, 'green');
linearGrad.addColorStop(0.75, 'blue');
linearGrad.addColorStop(1.0, 'black');
context.fillStyle = linearGrad;
context.fillRect(0, 0, 800, 800);
}
</script>
- 徑向漸變
//step1
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1);
//step2
grd.addColorStop(stop, color);
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
var linearGrad = context.createRadialGradient(400, 400, 100, 400, 400, 400);
linearGrad.addColorStop(0.0, 'white');
linearGrad.addColorStop(0.25, 'yellow');
linearGrad.addColorStop(0.5, 'green');
linearGrad.addColorStop(0.75, 'blue');
linearGrad.addColorStop(1.0, 'black');
context.fillStyle = linearGrad;
context.fillRect(0, 0, 800, 800);
}
</script>
5. createPattern
- createPattern(img, repeat-style)
repeat-style:no-repeat; repeat-x; repeat-y; repeat - createPattern(canvas, repeat-style)
- createPattern(video, repeat-style)
6.曲線繪制
-
圓或圓弧
context.arc(context, center, radius, startingAngle, endingAngle, anticlockwiae)
anticlockwiae = false 順時(shí)針
<canvas id="canvas"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 1024;
canvas.height = 768;
var context = canvas.getContext("2d");
context.lineWidth = 2;
context.strokeStyle = "#058";
for(var i = 0; i < 10; i ++){
context.beginPath();
context.arc(50 + i*100, 60, 40, 0,2*Math.PI*(i+1)/10);
context.closePath();//會(huì)自動(dòng)閉合
context.stroke()
}
for(var i = 0; i < 10; i ++){
context.beginPath();
context.arc(50 + i*100, 180, 40, 0,2*Math.PI*(i+1)/10);
context.stroke()
}
for(var i = 0; i < 10; i ++){
context.beginPath();
context.arc(50 + i*100, 300, 40, 0,2*Math.PI*(i+1)/10, true);
context.closePath();//會(huì)自動(dòng)閉合
context.stroke()
}
for(var i = 0; i < 10; i ++){
context.beginPath();
context.arc(50 + i*100, 420, 40, 0,2*Math.PI*(i+1)/10, true);
context.stroke()
}
context.fillStyle = "#0f0";
for(var i = 0; i < 10; i ++){
context.beginPath();
context.arc(50 + i*100, 540, 40, 0,2*Math.PI*(i+1)/10, true);
context.closePath();//會(huì)自動(dòng)閉合
context.fill()
}
for(var i = 0; i < 10; i ++){
context.beginPath();
context.arc(50 + i*100, 660, 40, 0,2*Math.PI*(i+1)/10, true);
context.fill()
}
}
</script>
-
arcTo
context.arcTo(x1, y1, x2, y2, radius)
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 1800;
canvas.height = 1800;
var context = canvas.getContext("2d");
context.moveTo(400,100)
context.arcTo(1200,400,400,700,400);
context.strokeStyle= "red"
context.stroke()
}
</script>
-
貝賽爾曲線 Bezier
（1）QuadraticCurveTo(二次)
context.moveTo(x0, y0); //初始點(diǎn)
contextquadraticCurveTo(x1, y1, x2, y2)//控制點(diǎn)育灸、結(jié)束點(diǎn)
（2）BezierCurveTo(三次)
context.moveTo(x0, y0);
context.bezierCurveTo(x1, y1, x2, y2, x3, y3);
function drawLand(cxt){
cxt.save();
cxt.beginPath();
cxt.moveTo(0, 600);
cxt.bezierCurveTo(540, 400, 660, 800, 1200, 600);
cxt.lineTo(1200, 800);
cxt.lineTo(0, 800);
cxt.closePath();
var lanStyle = cxt.createLinearGradient(0, 800, 0, 0);
lanStyle.addColorStop(0.0, "#030");
lanStyle.addColorStop(1.0, "#580");
cxt.fillStyle = lanStyle;
cxt.fill();
cxt.restore();
}
7.文字渲染基礎(chǔ)
context.font = "bold 40px Arial";
context.fillText(String, x, y, [maxlen]);
context.StrokeText(String, x, y, [maclen])
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
context.font = "bold 40px Arial";
context.fillStyle = "#058";
context.fillText("歡迎學(xué)習(xí)Canvas腻窒！歡迎學(xué)習(xí)Canvas！", 40, 100);
context.lineWidth = 1;
context.strokeStyle = "#058";
context.strokeText("歡迎學(xué)習(xí)Canvas磅崭！歡迎學(xué)習(xí)Canvas儿子！", 40, 200);
context.fillText("歡迎學(xué)習(xí)Canvas！歡迎學(xué)習(xí)Canvas砸喻！", 40, 300, 400);
context.strokeText("歡迎學(xué)習(xí)Canvas柔逼！歡迎學(xué)習(xí)Canvas蒋譬！", 40, 400, 400);
}
</script>
-
font
默認(rèn)值"20px sans-serif"
（1）font-style:
normal(default);
italic(斜體字);
oblique(傾斜字體)
（2）font-variant:
normal;
small-caps(以小型形式顯示大寫字母)
（3）font-weight:
lighter;
normal;
bold;
bolder;
100,200,300,400(normal),500,600,700(bold),800,900
（4）font-size:
20px;
2em;
150%;
（5）font-family:
設(shè)置多種字體備選；
支持@font-face
web安全字體
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
context.font = "bold 40px Arial";
var linearGrad = context.createLinearGradient(0, 0, 700, 0);
linearGrad.addColorStop(0.0, 'tomato');
linearGrad.addColorStop(0.25, 'yellow');
linearGrad.addColorStop(0.5, 'green');
linearGrad.addColorStop(0.75, 'pink');
linearGrad.addColorStop(1.0, 'red');
context.fillStyle = linearGrad;
// context.fillStyle = "#058";
context.fillText("歡迎學(xué)習(xí)Canvas愉适！歡迎學(xué)習(xí)Canvas犯助！", 40, 100);
context.lineWidth = 1;
context.strokeStyle = "#058";
context.strokeText("歡迎學(xué)習(xí)Canvas！歡迎學(xué)習(xí)Canvas维咸！", 40, 200);
context.fillText("歡迎學(xué)習(xí)Canvas剂买！歡迎學(xué)習(xí)Canvas！", 40, 300, 400);
context.strokeText("歡迎學(xué)習(xí)Canvas癌蓖！歡迎學(xué)習(xí)Canvas瞬哼！", 40, 400, 400);
}
</script>
-
文本對(duì)齊
context.textAlign = left/center/right
cotext.textBaseline = top/middle/bottom (alphabetic拉丁/ideographic漢，日/hanging印)
-
文本度量
context.measureText(String).width
8. 陰影
context.shadowColor;
context.shadowOffsetX;//x位移值
context.shadowOffsetY;//y位移值
xontext.shadowBlur; //模糊值
9. global
- globalAlpha = 1(default) //使全局具有透明度
- glibalCompositeOperation//繪制的圖像在重疊時(shí)產(chǎn)生的效果
"sourece-over" - 后繪制的圖像在先繪制的圖形上面
"destination-over" - 先繪制的圖形在后悔值的上面
···········································································································································································
source-over
source-atop
source-in
source-out
···········································································································································································
destination-over
destination-atop
destination-in
destination-out
···········································································································································································
lighter
copy
xor
10. 剪輯區(qū)域
context.clip();
11. 剪紙效果
非零環(huán)繞原則
其他
- clearRect
context.clearRect(x, y, width, height) - isPointInPath
context.isPointInPath(x, y)
var x = event.clientX - canvas.getBoundingClientRect().left
var y = event.clientY - canvas.getBoundingClientRect().Right
兼容性
explorecanvas https://code.google.con/p/explorecanvas/
canvas 圖形庫(kù)：canvasplus/ArtisanJS/Rgraph
