您的位置：首页 > 其它

笔记十三（绘制二）

2015-12-05 20:13 288 查看
利用quadraticCurveTo(cpx,cpy,x,y)方法绘制曲线,接收两个参数，第一个是控制点，第二个是曲线终点。该形状由一个名为二次贝塞尔曲线的标准算法决定。该曲线会弯向但永不触及控制点。要想曲线穿过某点，使用一下公式：(x0,y0)为起点，(x2,y2)为终点，(x1,y1)作为控制点，(xt,yt)代表要穿过的目标点。

x1 = xt  * 2 - (x0 + x2) / 2
y1 = yt * 2 - (y0 + y2) / 2


创建一个绘制曲线的程序:

文件名：drawing2.html。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>绘制2</title>
<style>
#canvas{background-color: #99cc33;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas'),
context = canvas.getContext("2d"),
mouse = utils.captureMouse(canvas),
x0= 100,
y0= 200,
x2= 300,
y2= 200;
canvas.addEventListener("mousemove" , function(){
context.clearRect(0,0,canvas.width,canvas.height);
var x1 = mouse.x * 2 - (x0+x2)/2,
y1 = mouse.y * 2 - (y0+y2)/2;
context.beginPath();
context.moveTo(x0,y0);
context.quadraticCurveTo(x1,y1,x2,y2);
context.stroke();
},false);
}
</script>
</body>
</html>


效果图：



参见《HTML5+Javascript动画基础》。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航