HTML5权威指南 5.绘制图形 

 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         }

 

posted @ 2017-08-28 16:10  wingzw  阅读(262)  评论(0)  编辑  收藏  举报