| 12345678910111213141516171819202122232425262728293031323334353637 |
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <meta charset="utf-8">
- <title>canvas直线</title>
- <meta name="Keywords" content="">
- <meta name="Description" content="">
- <style type="text/css">
- body, h1{margin:0;}
- canvas{margin: 20px; }
- </style>
- </head>
- <body onload="draw()">
- <h1>三次贝塞尔曲线</h1>
- <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas>
- <script>
- function draw() {
- var canvas=document.getElementById('canvas');
- var context=canvas.getContext('2d');
- //绘制起始点、控制点、终点
- context.beginPath();
- context.moveTo(25,175);
- context.lineTo(60,80);
- context.lineTo(150,30);
- context.lineTo(170,150);
- context.stroke();
- //绘制3次贝塞尔曲线
- context.beginPath();
- context.moveTo(25,175);
- context.bezierCurveTo(60,80,150,30,170,150);
- context.strokeStyle = "red";
- context.stroke();
- }
- </script>
- </body>
- </html>
|
