(HTML5 )canvas 第八章

 window.onload事件会在页面加载完成后触发。

canvas绘制曲线：

arc() //画不了椭圆，d3里面的椭圆用elipse

artTo()

//下面两个都是贝塞尔曲线

bezierCurveTo(c1px, c1py,c2px, c2py,x, y)

quadraticCurveTo(cpx, cpy, x, y)

控制点 本身不包含在曲线里，但是能影响曲线的最终形状

如

var control1_x=187;

var control1_y=32;

var control2_x=429;

var control2_y=480;

var endPointX=365;

var endPointY=133;

bezierCurveTo( control1_x, control1_y, control2_x, control2_y,endPointX,endPointY)

变换：translate

画正方形，是以画布的原点作为中心的，所以要用translate(x,y)才能使得正方形

context.translate(100, 100); context.rect(0, 0, 60, 60);

画矩形

fillRect(0,10,100,200)

移到中间

知识补充：

绘制曲线的最好方式，就是自己动手编写代码，为此给大家提供比较好的测试页面：http://tinyurl.com/html5bezier