話不多說，請看代碼
<!DOCTYPE html "><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script type="text/javascript"> function draw21(id) { var canvas = document.getElementById(id) if (canvas == null) return false; var context = canvas.getContext("2d"); //實踐表明在不設施fillStyle下的默認fillStyle=black context.fillRect(0, 0, 100, 100); //實踐表明在不設施strokeStyle下的默認strokeStyle=black context.strokeRect(120, 0, 100, 100); //設置純色 context.fillStyle = "red"; context.strokeStyle = "blue"; context.fillRect(0, 120, 100, 100); context.strokeRect(120, 120, 100, 100); //設置透明度實踐證明透明度值>0,<1值越低，越透明，值>=1時為純色，值<=0時為完全透明 context.fillStyle = "rgba(255,0,0,0.2)"; context.strokeStyle = "rgba(255,0,0,0.2)"; context.fillRect(240,0 , 100, 100); context.strokeRect(240, 120, 100, 100); } function draw22(id) { var canvas = document.getElementById(id) if (canvas == null) return false; var context = canvas.getContext("2d"); //實踐表明在不設施fillStyle下的默認fillStyle=black context.fillRect(0, 0, 100, 100); //實踐表明在不設施strokeStyle下的默認strokeStyle=black context.strokeRect(120, 0, 100, 100); //設置純色 context.fillStyle = "red"; context.strokeStyle = "blue"; context.fillRect(0, 120, 100, 100); context.strokeRect(120, 120, 100, 100); //設置透明度實踐證明透明度值>0,<1值越低，越透明，值>=1時為純色，值<=0時為完全透明 context.fillStyle = "rgba(255,0,0,0.2)"; context.strokeStyle = "rgba(255,0,0,0.2)"; context.fillRect(240, 0, 100, 100); context.strokeRect(240, 120, 100, 100); context.clearRect(50, 50, 240, 120); } function draw23(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext('2d'); var n = 0; //左側1/4圓弧 context.beginPath(); context.arc(100, 150, 50, 0, Math.PI/2 , false); context.fillStyle = 'rgba(255,0,0,0.25)'; context.fill(); context.strokeStyle = 'rgba(255,0,0,0.25)' context.closePath(); context.stroke(); //右側1/4圓弧 context.beginPath(); context.arc(300, 150, 50, 0, Math.PI/2 , false); context.fillStyle = 'rgba(255,0,0,0.25)'; context.fill(); context.strokeStyle = 'rgba(255,0,0,0.25)'; context.closePath(); context.stroke(); } function draw0(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext('2d'); context.beginPath(); context.arc(200, 150, 100, 0, Math.PI * 2, true); //不關閉路徑路徑會一直保留下去，當然也可以利用這個特點做出意想不到的效果 context.closePath(); context.fillStyle = 'rgba(0,255,0,0.25)'; context.fill(); } function draw1(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); var n = 0; var dx = 150; var dy = 150; var s = 100; context.beginPath(); context.fillStyle = 'rgb(100,255,100)'; context.strokeStyle = 'rgb(0,0,100)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 15 * 11; for (var i = 0; i < 30; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); context.fill(); context.stroke(); } function draw2(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext("2d"); context.fillStyle = "#EEEFF"; context.fillRect(0, 0, 400, 300); var n = 0; var dx = 150; var dy = 150; var s = 100; context.beginPath(); context.globalCompositeOperation = 'and'; context.fillStyle = 'rgb(100,255,100)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 15 * 11; context.moveTo(dx, dy); for (var i = 0; i < 30; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s); } context.closePath(); context.fill(); context.stroke(); } function draw24(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext("2d"); context.moveTo(50, 50); context.bezierCurveTo(50, 50,150, 50, 150, 150); context.stroke(); context.quadraticCurveTo(150, 250, 250, 250); context.stroke(); } function draw25(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); var g1 = context.createLinearGradient(0, 0, 0, 300); g1.addColorStop(0, 'rgb(255,0,0)'); //紅 g1.addColorStop(0.5, 'rgb(0,255,0)');//綠 g1.addColorStop(1, 'rgb(0,0,255)'); //藍 //可以把lg對象理解成GDI中線性brush context.fillStyle = g1; //再用這個brush來畫正方形 context.fillRect(0, 0, 400, 300); } function draw3(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); var g1 = context.createLinearGradient(0, 0, 0, 300); g1.addColorStop(0,'rgb(255,255,0)');//淺綠 g1.addColorStop(1,'rgb(0,255,255)');//淺藍 context.fillStyle = g1; context.fillRect(0, 0, 400, 300); var n = 0; var g2 = context.createLinearGradient(0, 0, 300, 0); g2.addColorStop(0, 'rgba(0,0,255,0.5)');//藍色 g2.addColorStop(1, 'rgba(255,0,0,0.5)');//紅色 for (var i = 0; i < 10; i++) { context.beginPath(); context.fillStyle = g2; context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); context.closePath(); context.fill(); } } function draw26(id) { //同一個圓心畫球型 /*var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100); g1.addColorStop(0.1, 'rgb(255,0,0)'); g1.addColorStop(1, 'rgb(50,0,0)'); context.fillStyle = g1; context.beginPath(); context.arc(200, 150, 100, 0, Math.PI * 2, true); context.closePath(); context.fill();*/ //不同圓心看徑向漸變模型 var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50); g1.addColorStop(0.1, 'rgb(255,0,0)'); g1.addColorStop(0.5, 'rgb(0,255,0)'); g1.addColorStop(1, 'rgb(0,0,255)'); context.fillStyle = g1; context.fillRect(0, 0, 400, 300); } function draw27(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowColor = 'rgba(100,100,100,0.5)'; context.shadowBlur = 1.5; context.fillStyle = 'rgba(255,0,0,0.5)'; context.fillRect(100, 100, 200, 100); } function draw4(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400); g1.addColorStop(0.1, 'rgb(255,255,0)'); g1.addColorStop(0.3, 'rgb(255,0,255)'); g1.addColorStop(1, 'rgb(0,255,255)'); context.fillStyle = g1; context.fillRect(0, 0, 400, 300); var n = 0;// var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);// g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');// g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');// g2.addColorStop(1, 'rgba(0,0,255,0.5)'); for (var i = 0; i < 10; i++) { var g2 = context.createRadialGradient(i * 25, i * 25, 0, i * 25, i * 25, i * 10); g2.addColorStop(0.1, 'rgba(255,0,0,0.5)'); g2.addColorStop(0.7, 'rgba(255,255,0,0.5)'); g2.addColorStop(1, 'rgba(0,0,255,0.5)'); context.beginPath(); context.fillStyle = g2; context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); context.fill(); } } function draw5(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.save(); //保存了當前context的狀態 context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); context.fillStyle = "rgba(255,0,0,0.1)"; //平移 縮放 旋轉 1 2 3 context.translate(100, 100); context.scale(0.5, 0.5); context.rotate(Math.PI / 4); context.fillRect(0, 0, 100, 100); context.restore(); //恢復到剛剛保存的狀態,保存恢復只能使用一次 context.save(); //保存了當前context的狀態 context.fillStyle = "rgba(255,0,0,0.2)"; //平移 旋轉 縮放 1 3 2 context.translate(100, 100); context.rotate(Math.PI / 4); context.scale(0.5, 0.5); context.fillRect(0, 0, 100, 100); context.restore(); //恢復到剛剛保存的狀態 context.save(); //保存了當前context的狀態 context.fillStyle = "rgba(255,0,0,0.3)"; //縮放 平移 旋轉 2 1 3 context.scale(0.5, 0.5); context.translate(100, 100); context.rotate(Math.PI / 4); context.fillRect(0, 0, 100, 100); context.restore(); //恢復到剛剛保存的狀態 context.save(); //保存了當前context的狀態 context.fillStyle = "rgba(255,0,0,0.4)"; //縮放 旋轉 平移 2 3 1 context.scale(0.5, 0.5); context.rotate(Math.PI / 4); context.translate(100, 100); context.fillRect(0, 0, 100, 100); context.restore(); //恢復到剛剛保存的狀態 context.save(); //保存了當前context的狀態 context.fillStyle = "rgba(255,0,0,0.5)"; //旋轉 平移 縮放 3 1 2 context.rotate(Math.PI / 4); context.translate(100, 100); context.scale(0.5, 0.5); context.fillRect(0, 0, 100, 100); context.restore(); //恢復到剛剛保存的狀態 context.save(); //保存了當前context的狀態 context.fillStyle = "rgba(255,0,0,1)"; //旋轉 縮放 平移 3 2 1 context.rotate(Math.PI / 4); context.scale(0.5, 0.5); context.translate(100, 100); context.fillRect(0, 0, 100, 100); //實驗表明應該移動的是坐標軸 //實驗表明縮放的是坐標軸比例 //實驗表明旋轉的是坐標軸 //綜合上述，因此平移 縮放 旋轉 三者的順序不同都將畫出不同的結果 } function draw6(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); //圖形繪制 context.translate(200, 50); context.fillStyle = 'rgba(255,0,0,0.25)'; for (var i = 0; i < 50; i++) { //實驗表明translate、scale、rotate都是在原有的context屬性上調整的 context.translate(25, 25); context.scale(0.95, 0.95); context.rotate(Math.PI / 10); context.fillRect(0, 0, 100, 50); } } function draw7(id) { var canvas = document.getElementById(id); var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); //圖形繪制 context.translate(200, 50); for (var i = 0; i < 50; i++) { context.translate(25, 25); context.scale(0.95, 0.95); context.rotate(Math.PI / 10); create5Star(context); context.fill(); } } function draw8(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); //context.beginPath(); context.strokeStyle = "rgb(250,0,0)"; context.fillStyle = "rgb(250,0,0)" //實驗證明第一次lineTo的時候和moveTo功能一樣 context.lineTo(100, 100); //之后的lineTo會以上次lineTo的節點為開始 context.lineTo(200, 200); context.lineTo(200, 100); context.moveTo(200, 50); context.lineTo(100,50); context.stroke(); } function draw9(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); //定義顏色 var colors = ["red", "orange", "yellow", "green", "blue", "navy", "perple"]; //定義線寬 context.lineWidth = 10; context.transform(1,0,0,1,100,0) //循環繪制圓弧 for (var i = 0; i < colors.length; i++) { //定義每次向下移動10個像素的變換矩陣 context.transform(1, 0, 0, 1, 0, 10); //設定顏色 context.strokeStyle = colors[i]; context.beginPath(); context.arc(50, 100, 100, 0, Math.PI, true); context.stroke(); } } function draw10(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext("2d"); var oprtns = new Array( "source-over", "destination-over", "source-in", "destination-in", "source-out", "destination-out", "source-atop", "destination-atop", "lighter", "xor", "copy" ); var i = 0;//組合效果編號 //結合setinterval動態顯示組合 var interal = setInterval(function () { if (i == 10) { i=0; } else { i++; } //每次重繪前清空 context.clearRect(0,0,400,300) //藍色矩形 context.fillStyle = "blue"; context.fillRect(10, 10, 60, 60); //設置組合方式 context.globalCompositeOperation = oprtns[i]; //設置新圖形（紅色圓形） context.beginPath(); context.fillStyle = "red"; context.arc(60, 60, 30, 0, Math.PI * 2, false); context.fill(); }, 1000); } function create5Star(context) { var n = 0; var dx = 100; var dy = 0; var s = 50; //創建路徑 context.beginPath(); context.fillStyle = 'rgba(255,0,0,0.5)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 5 * 4; for (var i = 0; i < 5; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); } function draw11(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowColor = 'rgba(100,100,100,0.5)'; context.shadowBlur =5; //圖形繪制 context.translate(0, 50); for (var i = 0; i < 3; i++) { context.translate(50, 50); create5Star(context); context.fill(); } } //drawImage(image,x,y) function draw28(id) { var image = new Image(); image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"; var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); image.onload = function () { context.drawImage(image,0,0); } } //drawImage(image,x,y,w,h) function draw12(id) { var image = new Image(); image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"; var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); image.onload = function () { context.drawImage(image, 50, 50, 300, 200); } } //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) function draw13(id){ var image = new Image(); image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"; var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); image.onload = function () { context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//這里取的是實際尺寸 } } function draw14(id) { //傳統的平鋪是用for循環來處理的，現在直接調用接口 var image = new Image(); var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); var type = ["no-repeat", "repeat-x", "repeat-y", "repeat"]; var i = 0; image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"; image.onload = function () { var interval = setInterval(function () { //每次轉換平鋪類型清空 context.clearRect(0, 0, 400, 300); if (i >= 4) { i = 0; } var ptrn = context.createPattern(image, type[i]); context.fillStyle = ptrn; context.fillRect(0, 0, 400, 300); i++; }, 1000); }; } //圖像裁剪 function draw15(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "black"; context.fillRect(0, 0, 400, 300); image = new Image(); image.onload = function () { drawImg(context,image); } image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png" } function drawImg(context, image) { //圓形裁剪區 //createCircleClip(context) //星形裁剪區 create5StarClip(context); context.drawImage(image,0,0); } function createCircleClip(context) { context.beginPath(); context.arc(200, 150, 100, 0, Math.PI * 2, true); context.closePath(); context.clip(); } function create5StarClip(context) { var n = 0; var dx = 200; var dy = 135; var s = 150; context.beginPath(); var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 5 * 4; for (var i = 0; i < 5; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); context.clip(); } function draw16(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = 'red' //在右下角畫一個正方形 context.fillRect(250,250,150,50); var image = new Image(); image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"; image.onload = function () { //在左上角畫一幅圖片 context.drawImage(image, 0, 0,200,200); //實驗證明imagedata取的是canvas所在范圍畫的圖形，不止是圖片 //不會取該區域內是空白的canvas的像素 var imagedata = context.getImageData(0, 0, 400, 300); //修改imagedata for (var i = 0, n = imagedata.data.length; i < n; i += 4) { imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red; imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; //blue //imagedata.data[i + 3] = 255 - imagedata.data[i + 3]; //a } context.putImageData(imagedata,0 ,0,100,100,300,200); } } function draw17(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; context.fillRect(0,0,400,300); context.fillStyle = "#00f"; context.font = "italic 30px sans-serif"; context.textBaseline = 'top'; //填充字符串 var txt="fill示例文字" context.fillText(txt, 0, 0); var length=context.measureText(txt); context.fillText("長" + length.width + "px", 0, 50); context.font = "bolid 30px sans-serif"; txt = "stroke示例文字"; length = context.measureText(txt); context.strokeText(txt,0,100); context.fillText("長" + length.width + "px", 0, 150); } function draw18(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "red"; context.save(); //保存了當前context的狀態 context.fillStyle = "black"; context.fillRect(0, 0, 100, 100); context.restore();//恢復到剛剛保存的狀態 context.fillRect(0,120,100,100); } function draw19(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "rgb(0,0,225)"; context.fillRect(0, 0, canvas.width, canvas.height); context.fillStyle = "rgb(255,255,0)"; context.fillRect(10, 20, 50, 50); //把圖像保存到新的窗口 var w=window.open(canvas.toDataURL("http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"),"smallwin","width=400,height=350"); } function draw20(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); var interal = setInterval(function () { move(context); }, 1); } var x = 100;//矩形開始坐標 var y = 100;//矩形結束坐標 var mx = 0;//0右1左 var my = 0; //0下1上 var ml = 1;//每次移動長度 var w = 20;//矩形寬度 var h = 20;//矩形高度 var cw = 400;//canvas寬度 var ch = 300; //canvas高度 function move(context) { context.clearRect(0, 0, 400, 300); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); context.fillStyle = "red"; context.fillRect(x, y, w, h); if (mx == 0) { x = x + ml; if (x >= cw-w) { mx = 1; } } else { x = x - ml; if (x <= 0) { mx = 0; } } if (my == 0) { y = y + ml; if (y >= ch-h) { my = 1; } } else { y = y - ml; if (y <= 0) { my = 0; } } } window.onload = function () { draw21("canvas21"); draw22("canvas22"); draw23("canvas23"); draw24("canvas24"); draw25("canvas25"); draw26("canvas26"); draw27("canvas27"); draw28("canvas28"); draw0("canvas0"); draw1("canvas1"); draw2("canvas2"); draw3("canvas3"); draw4("canvas4"); draw5("canvas5"); draw6("canvas6"); draw8("canvas8"); draw7("canvas7"); draw9("canvas9"); draw10("canvas10"); draw11("canvas11"); draw12("canvas12"); draw13("canvas13"); draw14("canvas14"); draw15("canvas15"); draw16("canvas16"); draw17("canvas17"); draw18("canvas18"); draw19("canvas19"); draw20("canvas20"); } </script></head><body> <section><header><h1>畫矩形</h1></header><canvas id="canvas21" width="400" height="300"></canvas></section> <section><header><h1>清除矩形</h1></header><canvas id="canvas22" width="400" height="300"></canvas></section> <section><header><h1>繪制路徑</h1></header><canvas id="canvas23" width="400" height="300"></canvas></section> <section><header><h1>畫圓()</h1></header><canvas id="canvas0" width="400" height="300"></canvas></section> <section><header><h1>畫線test(lineTo moveTo)</h1></header><canvas id="canvas8" width="400" height="300"></canvas></section> <section><header><h1>畫線demo(lineTo moveTo)</h1></header><canvas id="canvas1" width="400" height="300"></canvas></section> <section><header><h1>貝塞爾曲線test（bezierCurveTo）</h1></header><canvas id="canvas24" width="400" height="300"></canvas></section> <section><header><h1>貝塞爾曲線demo（bezierCurveTo）</h1></header><canvas id="canvas2" width="400" height="300"></canvas></section> <section><header><h1>線性test（createLinearGradient addColorStop）</h1></header><canvas id="canvas25" width="400" height="300"></canvas></section> <section><header><h1>線性demo（createLinearGradient addColorStop）</h1></header><canvas id="canvas3" width="400" height="300"></canvas></section> <section><header><h1>發散test（createRadialGradient）</h1></header><canvas id="canvas26" width="400" height="300"></canvas></section> <section><header><h1>發散demo（createRadialGradient）</h1></header><canvas id="canvas4" width="400" height="300"></canvas></section> <section><header><h1>平移 test（translate）縮放（scale） 旋轉（rotate）</h1></header><canvas id="canvas5" width="400" height="300"></canvas></section> <section><header><h1>平移 demo（translate）縮放（scale） 旋轉（rotate）</h1></header><canvas id="canvas6" width="400" height="300"></canvas></section> <section><header><h1>坐標與路徑的結合使用</h1></header><canvas id="canvas7" width="400" height="300"></canvas></section> <section><header><h1>矩陣變換</h1></header><canvas id="canvas9" width="400" height="300"></canvas></section> <section><header><h1>圖形組合疊加(globalCompositeOperation)</h1></header><canvas id="canvas10" width="400" height="300"></canvas></section> <section><header><h1>給圖像繪制陰影test shadowOffsetX(陰影的橫向位移量) shadowOffsetY(盈盈的縱向位移量) shadowColor（陰影的顏色） shadowBlur（陰影的模糊范圍）</h1></header><canvas id="canvas27" width="400" height="300"></canvas></section> <section><header><h1>給圖像繪制陰影demo shadowOffsetX(陰影的橫向位移量) shadowOffsetY(盈盈的縱向位移量) shadowColor（陰影的顏色） shadowBlur（陰影的模糊范圍）</h1></header><canvas id="canvas11" width="400" height="300"></canvas></section> <section><header><h1>繪制圖像drawImage(image,x,y)</h1></header><canvas id="canvas28" width="400" height="300"></canvas></section> <section><header><h1>繪制圖像drawImage(image,x,y,w,h)</h1></header><canvas id="canvas12" width="400" height="300"></canvas></section> <section><header><h1>繪制局部圖像drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)</h1></header><canvas id="canvas13" width="400" height="300"></canvas></section> <section><header><h1>圖像平鋪</h1></header><canvas id="canvas14" width="400" height="300"></canvas></section> <section><header><h1>圖像裁剪clip</h1></header><canvas id="canvas15" width="400" height="300"></canvas></section> <section><header><h1>像素處理getImageData</h1></header><canvas id="canvas16" width="400" height="300"></canvas></section> <section><header><h1>繪制文字fillText strokeText</h1></header><canvas id="canvas17" width="400" height="300"></canvas></section> <section><header><h1>繪圖狀態的保存save與恢復restore</h1></header><canvas id="canvas18" width="400" height="300"></canvas></section> <section><header><h1>保存文件canvas.toDataURL</h1></header><canvas id="canvas19" width="400" height="300"></canvas></section> <section><header><h1>簡單動畫</h1></header><canvas id="canvas20" width="400" height="300"></canvas></section></body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
