您的位置：首页 > 其它

贝塞尔二次、三次曲线

2016-05-11 09:58 746 查看

//贝塞尔二次曲线的实例：http://tinyurl.com/html5quadratic

//贝塞尔3次曲线的实例：http://tinyurl.com/html5bezier

<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>starGirl</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style> </head> <body> <div> <canvas id = "canvas" width = "800px" height = "600px"></canvas> </div> <script type = "text/javascript" >
window.onload=function(){
var context = document.getElementById('canvas').getContext('2d')
//贝塞尔二次曲线的实例：http://tinyurl.com/html5quadratic
canvas.height=800;
canvas.width=800;
context.strokeStyle='red';
context.lineWidth=3;
context.beginPath();
context.moveTo(100,100);
context.quadraticCurveTo(300,250,500,100);
context.stroke();
context.moveTo(100,100);
context.quadraticCurveTo(300,450,500,100);
context.stroke();
context.closePath();
//贝塞尔3次曲线的实例：http://tinyurl.com/html5bezier
context.lineWidth = 6;
context.strokeStyle = "#333";
context.beginPath();
context.moveTo(400, 276);
context.bezierCurveTo(180, 60, 246, 343, 71, 236);
context.stroke();
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航