笔记十三（绘制二）

来源：互联网发布：淘宝售后培训ppt 编辑：程序博客网时间：2024/05/29 10:51

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

x1 = xt  * 2 - (x0 + x2) / 2y1 = 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动画基础》。

0 0