canvas入门系列
canvas入门(一) 绘制线与正方形
canvas入门(二) 标签width与style:width的区别
canvas入门(三) 绘制代码分块
canvas入门(四) 绘制线的扩展api
canvas入门(五) 贝塞尔曲线
canvas入门(六) 旋转、偏移、缩放
canvas入门(七) 中心旋转
这一节主要给大家分享两个曲线————二次贝塞尔曲线和三次贝塞尔曲线
二次贝塞尔曲线示例
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(50, 50);
context.quadraticCurveTo(100, 100, 200, 50);
context.stroke();
context.closePath();
}
</script>
运行结果如下
参数细解
context.moveTo(a, b); 绘制起点
context.quadraticCurveTo(c, d, e, f); 前两个参数控制曲线的弯曲程度,c,d 后两个参数控制曲线的终点e,f
演示网址推荐
blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
三次贝塞尔曲线示例
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(50, 50);
context.bezierCurveTo(100, 100, 150,0,200, 50);
context.stroke();
context.closePath();
}
</script>
运行结果如下
参数细解
context.moveTo(a, b); 绘制起点
context.bezierCurveTo(c, d, e, f ,g ,h); c,d控制第一次弯曲程度,e,f控制第二次弯曲程度,g,h终点
演示网址推荐
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
本节最后一个知识点,清空画布clearRect
在上述代码最后新添一行代码context.clearRect(0,0,canvas.width,canvas.height);
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(50, 50);
context.bezierCurveTo(100, 100, 150,0,200, 50);
context.stroke();
context.closePath();
context.clearRect(0,0,canvas.width,canvas.height);
}
</script>
运行之后你就会发现画布空空如也
参数细解
context.clearRect(a,b,c,d); a,b起点,c从起点开始向右宽度,d从起点开始向下高度;
既然有clearRect,那是不是自然有rect,这个留给大家自己去学习
最后给大家分享一个小细节,学习到的代码中的moveTo其实可以换成lineTo,实现的效果与之前的一模一样。
下一节将会为大家分享一些canvas中的旋转,偏移之类的效果