20170803

zhangyue0503 · Aug 3, 2017 · 39df5fe · 39df5fe
1 parent 273a371
commit 39df5fe
Showing 1 changed file with 86 additions and 0 deletions.
diff --git a/html5yucss3quanweizhinan/5.html b/html5yucss3quanweizhinan/5.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+        <script type="text/javascript">
+            function draw(){
+                var canvas = document.getElementById("canvas1");
+                if(canvas == null)
+                    return false;
+                var context = canvas.getContext('2d');
+
+                //矩形
+                context.fillStyle = "#eeeeff";
+                context.fillRect(0,0,400,300);
+                context.fillStyle = "red";
+                context.strokeStyle = "blue";
+                context.lineWidth = 1;
+                context.fillRect(50,50,100,100);
+                context.strokeRect(50,50,100,100);
+
+                //圆
+                var n = 0;
+                for (var i = 0; i < 10; i++) {
+                    context.beginPath();
+                    context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
+                    context.closePath();
+                    context.fillStyle = 'rgb(255,0,0,0.25)';
+                    context.fill();
+                }
+
+                //线段图形
+                n = 0;
+                var dx=150,dy=150,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();
+
+                //贝济埃曲线
+                n = 0;
+                dx=150;
+                dy=150;
+                s=100;
+                context.beginPath();
+                context.globalCompositeOperation = 'and';
+                context.fillStyle = 'rgb(0,255,100)';
+                x = Math.sin(0);
+                y = Math.cos(0);
+                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();
+
+
+                var canvas2 = document.getElementById("canvas2");
+                if(canvas2 == null)
+                    return false;
+                var context2 = canvas2.getContext('2d');
+                context2.fillStyle = "#eeeeff";
+                context2.fillRect(0,0,400,300);
+
+            }
+        </script>
+    </head>
+    <body onload="draw('canvas');">
+        <canvas id="canvas1" width="400" height="300"></canvas>
+        <canvas id="canvas2" width="400" height="300"></canvas>
+    </body>
+</html>