话不多说，请看代码
<!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>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！
新闻热点
疑难解答
