窗棂 - 博客园

2016年8月13日

[ html canvas bezierCurveTo ] canvas绘图 bezierCurveTo ()属性研究实例演示

前面的文章我已经讲了3种在canvas中画曲线的方法：arc,arcTo以及quadraticCurveTo.他们都有一个共同点，就是他们画的曲线都只能偏向一边，今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点，即可以画出S形的曲线了。 bezierCurveTo，也就是所谓的贝 Read More

posted @ 2016-08-13 20:46 窗棂 Views(335) Comments(0) Diggs(0) Edit

[ html canvas quadraticCurveTo ] canvas绘图quadraticCurveTo()属性研究实例演示

说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下：其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用 Read More

posted @ 2016-08-13 19:22 窗棂 Views(216) Comments(0) Diggs(0) Edit

[ html canvas arcTo ] canvas绘图 arcTo()属性研究实例演示

arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ arcTo的参数中包括两个点，而且这两个点中并没有表示圆心的点，仅仅最后的参数是圆的半径，表示arcTo和圆有那么点关系。网上关于arcTo的文章很少，好不 Read More

posted @ 2016-08-13 18:25 窗棂 Views(203) Comments(0) Diggs(0) Edit

2016年8月11日

[ html canvas createLinearGradient createRadialGradient ] canvas绘制渐变 createLinearGradient createRadialGradient方式实例演示

Insert you title 您的浏览器版本过低,请升级您的浏览器以获取更好的用户体验... Read More

posted @ 2016-08-11 20:52 窗棂 Views(603) Comments(0) Diggs(0) Edit

[ html drawImage createPattern ] canvas绘制图片 drawImage 属性图片平铺方式实例演示

Insert you title 您的浏览器版本过低,请升级您的浏览器以获取更好的用户体验... Read More

posted @ 2016-08-11 20:20 窗棂 Views(1223) Comments(0) Diggs(0) Edit

[ html drawImage 绘制图片 ] canvas绘制图片 drawImage 属性实例演示

Insert you title 您的浏览器版本过低,请升级您的浏览器以获取更好的用户体验... Read More

posted @ 2016-08-11 20:04 窗棂 Views(505) Comments(0) Diggs(0) Edit

[ html 绘图时钟 ] canvas绘图时钟实例演示之二