最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
html5 canvas 详细使用教程
时间:2017-02-10 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 |
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++) { varx=Math.sin(i * dig); vary=Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); context.fill(); context.stroke(); } function draw2(id) { varcanvas=document.getElementById(id); if (canvas == null) { return false; } varcontext=canvas.getContext("2d"); context.fillStyle="#EEEFF"; context.fillRect(0, 0, 400, 300); varn=0; vardx=150; vardy=150; vars=100; context.beginPath(); context.globalCompositeOperation='and'; context.fillStyle='rgb(100,255,100)'; varx=Math.sin(0); vary=Math.cos(0); vardig=Math.PI / 15 * 11; context.moveTo(dx, dy); for (vari=0; i < 30; i++) { varx=Math.sin(i * dig); vary=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) { varcanvas=document.getElementById(id); if (canvas == null) { return false; } varcontext=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) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=canvas.getContext('2d'); varg1=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) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=canvas.getContext('2d'); varg1=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); varn=0; varg2=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 (vari=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) { //同一个圆心画球型 /*varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=canvas.getContext('2d'); varg1=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();*/ //不同圆心看径向渐变模型 varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=canvas.getContext('2d'); varg1=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) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=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) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=canvas.getContext('2d'); varg1=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); varn=0; // varg2=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 (vari=0; i < 10; i++) { varg2=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) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=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) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=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 (vari=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) { varcanvas=document.getElementById(id); varcontext=canvas.getContext("2d"); context.fillStyle="#EEEEFF"; context.fillRect(0, 0, 400, 300); //图形绘制 context.translate(200, 50); for (vari=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) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=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) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=canvas.getContext("2d"); //定义颜色 var colors = ["red", "orange", "yellow", "green", "blue", "navy", "perple"]; //定义线宽 context.lineWidth=10; context.transform(1,0,0,1,100,0) //循环绘制圆弧 for (vari=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) { varcanvas=document.getElementById(id); if (canvas == null) { return false; } varcontext=canvas.getContext("2d"); varoprtns=newArray( "source-over", "destination-over", "source-in", "destination-in", "source-out", "destination-out", "source-atop", "destination-atop", "lighter", "xor", "copy" ); vari=0;//组合效果编号 //结合setinterval动态显示组合 varinteral=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) { varn=0; vardx=100; vardy=0; vars=50; //创建路径 context.beginPath(); context.fillStyle='rgba(255,0,0,0.5)'; varx=Math.sin(0); vary=Math.cos(0); vardig=Math.PI / 5 * 4; for (vari=0; i < 5; i++) { varx=Math.sin(i * dig); vary=Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); } function draw11(id) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=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 (vari=0; i < 3; i++) { context.translate(50, 50); create5Star(context); context.fill(); } } //drawImage(image,x,y) function draw28(id) { varimage=newImage(); image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"; varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=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) { varimage=newImage(); image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"; varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=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){ varimage=newImage(); image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"; varcanvas=document.getElementById(id);
if (canvas == null) return false; varcontext=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循环来处理的,现在直接调用接口 varimage=newImage(); varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=canvas.getContext("2d"); var type = ["no-repeat", "repeat-x", "repeat-y", "repeat"]; vari=0; image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"; image.onload=function() { varinterval=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++) { varx=Math.sin(i * dig); vary=Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); context.clip(); } function draw16(id) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=canvas.getContext("2d"); context.fillStyle='red' //在右下角画一个正方形 context.fillRect(250,250,150,50); varimage=newImage(); image.src="http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"; image.onload=function() { //在左上角画一幅图片 context.drawImage(image, 0, 0,200,200); //实验证明imagedata取的是canvas所在范围画的图形,不止是图片 //不会取该区域内是空白的canvas的像素 varimagedata=context.getImageData(0, 0, 400, 300); //修改imagedata for (vari=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) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=canvas.getContext("2d"); context.fillStyle="#EEEEFF"; context.fillRect(0,0,400,300); context.fillStyle="#00f"; context.font="italic 30px sans-serif"; context.textBaseline='top'; //填充字符串 vartxt="fill示例文字" context.fillText(txt, 0, 0); varlength=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) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=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) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=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); //把图像保存到新的窗口 varw=window.open(canvas.toDataURL("http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"),"smallwin","width=400,height=350"); } function draw20(id) { varcanvas=document.getElementById(id); if (canvas == null) return false; varcontext=canvas.getContext("2d"); varinteral=setInterval(function () { move(context); }, 1); } varx=100;//矩形开始坐标 vary=100;//矩形结束坐标 varmx=0;//0右1左 varmy=0; //0下1上 varml=1;//每次移动长度 varw=20;//矩形宽度 varh=20;//矩形高度 varcw=400;//canvas宽度 varch=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"); }
|