canvas绘图——贝塞尔曲线

翻越这墙 · 发表于 2012-12-22 20:37:59

canvas绘图——贝塞尔曲线

<div class="postText"><div id="cnblogs_post_body">1、二次贝塞尔曲线
　　quadraticCurveTo(cpx,cpy,x,y)　　//cpx，cpy表示控制点的坐标, x，y表示终点坐标；
数学公式表示如下：
二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：

代码实例：
<div class="cnblogs_code"><!DOCTYPE html><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(20,170); context.lineTo(130,40); context.lineTo(180,150); context.stroke(); //绘制2次贝塞尔曲线 context.beginPath(); context.moveTo(20,170); context.quadraticCurveTo(130,40,180,150); context.strokeStyle = "red"; context.stroke(); }</script></body></html>

		自动登录	找回密码
密码			立即注册