html5 canvas 详细使用教程

话不多说，请看代码
<！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=blackcontext.fillRect（0, 0, 100, 100）;//实践表明在不设施strokeStyle下的默认strokeStyle=blackcontext.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=blackcontext.fillRect（0, 0, 100, 100）;//实践表明在不设施strokeStyle下的默认strokeStyle=blackcontext.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中线性brushcontext.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 3context.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 2context.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）;//修改imagedatafor （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]; //greenimagedata.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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！