1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 8 </head> 9 10 <body onload="draw('canvas')"> 11 <canvas id="canvas" width="400" height="300"> 12 <script> 13 function draw(id){ 14 var canvas=document.getElementById(id); 15 if(canvas==null){ 16 return false; 17 } 18 var context=canvas.getContext("2d"); 19 context.fillStyle="#eeeeff"; 20 context.fillRect(0,0,400,300); 21 context.fillStyle="red"; 22 context.strokeStyle="blue"; 23 context.lineWidth=1; 24 context.fillRect(50,50,100,100); 25 context.strokRect(50,50,100,100); 26 } 27 </script> 28 </body> 29 30 </html>
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "#eeeeff"; 8 context.fillRect(0, 0, 400, 300); 9 var n = 0; 10 for (var i = 0; i < 10; i++) { 11 context.beginPath(); 12 context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); 13 context.closePath(); 14 context.fillStyle = "rgba(255,0,0,0.25)"; 15 context.fill(); 16 } 17 18 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "#eeeeff"; 8 context.fillRect(0, 0, 400, 300); 9 var n = 0; 10 var dx = 150; 11 var dy = 150; 12 var s = 100; 13 context.beginPath(); 14 context.fillStyle = "rgb(100,255,100)"; 15 context.strokeStyle = "rgb(0,0,100)"; 16 var x = Math.sin(0); 17 var y = Math.cos(0); 18 var dig = Math.PI / 15 * 11; 19 for (var i = 0; i < 30; i++) { 20 var x = Math.sin(i * dig); 21 var y = Math.cos(i * dig); 22 context.lineTo(dx + x * s, dy + y * s); 23 } 24 context.closePath(); 25 context.fill(); 26 context.stroke(); 27 28 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "#eeeeff"; 8 context.beginPath(); 9 context.lineWidth=10; 10 context.lineCap="round"; 11 context.moveTo(20,20); 12 context.lineTo(20,200); 13 context.stroke(); 14 15 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "#eeeeff"; 8 context.beginPath(); 9 context.lineWidth=10; 10 context.lineJoin="round"; 11 context.moveTo(20,20); 12 context.lineTo(20,200); 13 context.lineTo(200,200); 14 context.stroke(); 15 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "#eeeeff"; 8 context.beginPath(); 9 context.lineWidth=5; 10 context.setLineDash([5]); 11 context.moveTo(20,20); 12 context.lineTo(200,20); 13 context.stroke(); 14 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.beginPath(); 8 context.moveTo(150,20); 9 context.arcTo(150,100,50,20,30); 10 context.stroke(); 11 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle="#eeeeff"; 8 context.fillRect(0,0,400,300); 9 var n=0; 10 var dx=150; 11 var dy=150; 12 var s=100; 13 context.beginPath(); 14 context.globalCompositeOperation="and"; 15 context.fillStyle="rgb(100,255,100)"; 16 var x=Math.sin(0); 17 var y=Math.cos(0); 18 var dig=Math.PI/15*11; 19 context.moveTo(dx,dy); 20 for(var i=0;i<30;i++){ 21 var x=Math.sin(i*dig); 22 var y=Math.cos(i*dig); 23 context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s); 24 } 25 context.closePath(); 26 context.fill(); 27 context.stroke(); 28 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle="#eeeeff"; 8 context.fillRect(0,0,400,300); 9 var n=0; 10 for(var i=0;i<10;i++){ 11 var path=new Path2D(); 12 path.arc(i*25,i*25,i*10,0,Math.PI*2,true); 13 context.closePath(); 14 context.fillStyle="rgba(255,0,0,0.25)"; 15 context.fill(path); 16 } 17 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 var path1=new Path2D(); 8 path1.rect(10,10,100,100); 9 var path2=new Path2D(path1); 10 path2.moveTo(220,60); 11 path2.arc(170,60,50,0,2*Math.PI); 12 context.stroke(path2); 13 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 var g1=context.createLinearGradient(0,0,0,300); 8 g1.addColorStop(0,'rgb(255,255,0)'); 9 g1.addColorStop(1,'rgb(255,255,255)'); 10 context.fillStyle=g1; 11 context.fillRect(0,0,400,300); 12 var n=0; 13 var g2=context.createLinearGradient(0,0,300,0); 14 g2.addColorStop(0,'rgba(0,0,255,0.5)'); 15 g2.addColorStop(1,'rgba(255,0,0,0.5)'); 16 for(var i=0;i<10;i++){ 17 context.beginPath(); 18 context.fillStyle=g2; 19 context.arc(i*25,i*25,i*10,0,Math.PI*2,true); 20 context.closePath(); 21 context.fill(); 22 } 23 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 var g1=context.createLinearGradient(400,0,0,400,0,400); 8 g1.addColorStop(0.1,'rgb(255,255,0)'); 9 g1.addColorStop(0.3,'rgb(255,0,255)'); 10 g1.addColorStop(1,'rgb(0,255,255)'); 11 context.fillStyle=g1; 12 context.fillRect(0,0,400,300); 13 var n=0; 14 var g2=context.createLinearGradient(250,250,0,250,250,300); 15 g2.addColorStop(0.1,'rgba(255,0,0,0.5)'); 16 g2.addColorStop(0.7,'rgba(255,255,0,0.5)'); 17 for(var i=0;i<10;i++){ 18 context.beginPath(); 19 context.fillStyle=g2; 20 context.arc(i*25,i*25,i*10,0,Math.PI*2,true); 21 context.closePath(); 22 context.fill(); 23 } 24 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle="#eeeeff"; 8 context.fillRect(0,0,400,300); 9 //图形绘制 10 context.translate(200,50); 11 context.fillStyle="rgba(255,0,0,0.25)"; 12 for(var i=0;i<50;i++){ 13 context.translate(25,25); 14 context.scale(0.95,0.95); 15 context.rotate(Math.PI/10); 16 context.fillRect(0,0,100,50); 17 } 18 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle="#eeeeff"; 8 context.fillRect(0,0,400,300); 9 //图形绘制 10 context.translate(200,50); 11 for(var i=0;i<50;i++){ 12 context.translate(25,25); 13 context.scale(0.95,0.95); 14 context.rotate(Math.PI/10); 15 create5Star(context); 16 context.fill(); 17 } 18 } 19 function create5Star(context){ 20 var n=0; 21 var dx=100; 22 var dy=0; 23 var s=50; 24 //创建路径 25 context.beginPath(); 26 context.fillStyle="rgba(255,0,0,0.5)"; 27 var x=Math.sin(0); 28 var y=Math.cos(0); 29 var dig=Math.PI/5*4; 30 for(var i=0;i<5;i++){ 31 var x=Math.sin(i*dig); 32 var y=Math.cos(i*dig); 33 context.lineTo(dx+x*s,dy+y*s); 34 } 35 context.closePath(); 36 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 // 定义颜色 8 var colors=["red","orange","yellow","green","blue","navy","purple"]; 9 // 定义线宽 10 context.lineWidth=10; 11 context.transform(1,0,0,1,100,0); 12 // 循环绘制圆弧 13 for(var i=0;i<colors.length;i++){ 14 // 定义每次向下移动10个像素的变换矩阵 15 context.transform(1,0,0,1,0,10); 16 // 设定颜色 17 context.strokeStyle=colors[i]; 18 // 绘制圆弧 19 context.beginPath(); 20 context.arc(50,100,100,0,Math.PI,true); 21 context.stroke(); 22 } 23 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 // 绘制红色长方形 8 context.strokeStyle="red"; 9 context.strokeRect(30,10,60,20); 10 // 绘制顺时针旋转45°后的蓝色长方形 11 // 绘制45°圆弧 12 var rad=45*Math.PI/180; 13 // 定义顺时针旋转45°的变换矩阵 14 context.setTransform(Math.cos(rad),Math.sin(rad),-Math.sin(rad),Math.cos(rad),0,0); 15 // 绘制图形 16 context.strokeStyle="blue"; 17 context.strokeRect(30,10,60,20); 18 // 绘制放大2.5倍后的绿色长方形 19 // 定义放大2.5倍的变换矩阵 20 context.setTransform(2.5,0,0,2.5,0,0); 21 // 绘制图形 22 context.strokeStyle="green"; 23 context.strokeRect(30,10,60,20); 24 // 将坐标原点向右移动40像素，向下移动80像素后绘制长方形 25 // 定义将坐标原点向右移动40像素，向下移动80像素的矩阵 26 context.setTransform(1,0,0,1,40,80); 27 // 绘制图形 28 context.strokeStyle="gray"; 29 context.strokeRect(30,10,60,20); 30 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "#eeeeff"; 8 context.fillRect(0, 0, 400, 300); 9 context.shadowOffsetX = 10; 10 context.shadowOffsetY = 10; 11 context.shadowColor = "rgba(100,100,100,0.5)"; 12 context.shadowBlur = 7.5; 13 //图形绘制 14 context.translate(0, 50); 15 for (var i = 0; i < 3; i++) { 16 context.translate(50, 50); 17 create5Star(context); 18 context.fill(); 19 } 20 } 21 function create5Star(context) { 22 var n = 0; 23 var dx = 100; 24 var dy = 0; 25 var s = 50; 26 //创建路径 27 context.beginPath(); 28 context.fillStyle = "rgba(255,0,0,0.5)"; 29 var x = Math.sin(0); 30 var y = Math.cos(0); 31 var dig = Math.PI / 5 * 4; 32 for (var i = 0; i < 5; i++) { 33 var x = Math.sin(i * dig); 34 var y = Math.cos(i * dig); 35 context.lineTo(dx + x * s, dy + y * s); 36 } 37 context.closePath(); 38 39 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "#eeeeff"; 8 context.fillRect(0, 0, 400, 300); 9 image=new Image(); 10 image.src="http://static.cnblogs.com/images/adminlogo.gif"; 11 image.onload=function(){ 12 drawImg(context,image); 13 } 14 } 15 function drawImg(context,image){ 16 for(var i=0;i<7;i++){ 17 context.drawImage(image,0+i*50,0+i*25,100,100); 18 } 19 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "#eeeeff"; 8 context.fillRect(0, 0, 400, 300); 9 image=new Image(); 10 image.src="http://static.cnblogs.com/images/adminlogo.gif"; 11 image.onload=function(){ 12 drawImg(context,image); 13 } 14 } 15 function drawImg(context,image){ 16 var i=0; 17 // 首先调用该方法绘制原始图像 18 context.drawImage(image,0,0,100,100); 19 // 绘制将局部区域进行放大后的图像 20 context.drawImage(image,23,5,57,80,110,0,100,100); 21 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "#eeeeff"; 8 context.fillRect(0, 0, 400, 300); 9 image = new Image(); 10 image.src = "http://static.cnblogs.com/images/adminlogo.gif"; 11 image.onload = function () { 12 drawImg(canvas, context, image); 13 } 14 } 15 function drawImg(canvas, context, image) { 16 // 平铺比例 17 var scale = 5; 18 // 缩小后图像宽度 19 var n1 = image.width / scale; 20 // 缩小后图像高度 21 var n2 = image.height / scale; 22 // 平铺横向个数 23 var n3 = canvas.width / n1; 24 // 平铺纵向个数 25 var n4 = canvas.height / n2; 26 for (var i = 0; i < n3; i++) { 27 for (var j = 0; j < n4; j++) { 28 context.drawImage(image, i * n1, j * n2, n1, n2); 29 } 30 } 31 }
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 8 </head> 9 10 <body onload="draw('canvas')"> 11 <canvas id="canvas" width="400" height="300"></canvas> 12 <script> 13 function draw(id) { 14 var canvas = document.getElementById(id); 15 if (canvas == null) { 16 return false; 17 } 18 var context = canvas.getContext("2d"); 19 image = new Image(); 20 image.src = "http://static.cnblogs.com/images/adminlogo.gif"; 21 image.onload = function () { 22 var ptrn = context.createPattern(image, 'repeat'); 23 // 指定填充样式 24 context.fillStyle = ptrn; 25 // 填充画布 26 context.fillRect(0, 0, 400, 300); 27 } 28 } 29 </script> 30 </body> 31 32 </html>
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 var gr=context.createLinearGradient(0,400,300,0); 8 gr.addColorStop(0,"rgb(255,255,0)"); 9 gr.addColorStop(1,"rgb(0,255,255)"); 10 context.fillStyle=gr; 11 context.fillRect(0,0,400,300); 12 image = new Image(); 13 image.src = "http://static.cnblogs.com/images/adminlogo.gif"; 14 image.onload = function () { 15 drawImg(context,image); 16 } 17 } 18 function drawImg(context,image){ 19 create5StarClip(context); 20 context.drawImage(image,-50,-150,300,300); 21 } 22 function create5StarClip(context){ 23 var n=0; 24 var dx=100; 25 var dy=0; 26 var s=150; 27 context.beginPath(); 28 context.translate(100,150); 29 var x=Math.sin(0); 30 var y=Math.cos(0); 31 var dig=Math.PI/5*4; 32 for(var i=0;i<5;i++){ 33 var x=Math.sin(i*dig); 34 var y=Math.cos(i*dig); 35 context.lineTo(dx+x*s,dy+y*s); 36 } 37 context.clip(); 38 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 var gr=context.createLinearGradient(0,400,300,0); 8 gr.addColorStop(0,"rgb(255,255,0)"); 9 gr.addColorStop(1,"rgb(0,255,255)"); 10 context.fillStyle=gr; 11 context.fillRect(0,0,400,300); 12 image = new Image(); 13 image.src = "http://static.cnblogs.com/images/adminlogo.gif"; 14 image.onload = function () { 15 context.drawImage(image,0,0); 16 var imagedata=context.getImageData(0,0,image.width,image.height); 17 for(var i=0,n=imagedata.data.length; i<n; i+=4){ 18 imagedata.data[i+0]=255-imagedata.data[i+0];//red 19 imagedata.data[i+1]=255-imagedata.data[i+2];//green 20 imagedata.data[i+2]=255-imagedata.data[i+1];//blue 21 } 22 context.putImageData(imagedata,0,0); 23 } 24 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 var oprtns = new Array( 8 "source-atop", 9 "source-in", 10 "source-out", 11 "source-over", 12 "destination-atop", 13 "destination-in", 14 "destination-out", 15 "destination-over", 16 "lighter", 17 "copy", 18 "xor" 19 ); 20 i = 8;//读者可自行修改该参数来显示想要查看的组合效果 21 //绘制原有图形（蓝色长方形） 22 context.fillStyle="blue"; 23 context.fillRect(10,10,60,60); 24 /* 25 设置组合方式，从组合的参数数组中挑选组合方式，此处因为i是8， 26 所以选择oprtns数组中第9（数组从0开始计算）个组合方式lighter 27 */ 28 // 设置新图形（红色圆形） 29 context.beginPath(); 30 context.fillStyle="red"; 31 context.arc(60,60,30,0,Math.PI*2,false); 32 context.fill(); 33 }
1 function draw(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) { 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 context.globalCompositeOperation = "darken"; 8 9 var image = new Image(); 10 image.src = "http://static.cnblogs.com/images/adminlogo.gif"; 11 image.onload = function () { 12 context.drawImage(image, 0, 0); 13 var image2 = new Image(); 14 image2.src = "http://static.cnblogs.com/images/adminlogo.gif"; 15 image2.onload = function () { 16 context.drawImage(image2, 200, 0); 17 } 18 } 19 }
