Canvas
关注
分享
扫一扫
PaigeWw
这个作者很懒，什么都没留下…
展开
-
Canvas线段的绘制
moveTo(x,y)lineTo(x,y)lineWidth//线条宽度strokeStyle//线条样式storoke()//线条绘制填充fillStyle//填充fill()//绘制填充Canvas提供的图形绘制函数rect(x,y,width,height)//定义矩形状态//绘制矩形fillRect(x,y,width,height)原创 2016-05-19 10:20:06 · 711 阅读 · 0 评论 -
Canvas绘制线段和圆
Canvas默认 300px*150px Title var canvas = document.getElementById("canvas"); var context=canvas.getContext("2d"); /*****************************绘制直线*****************原创 2016-05-15 18:12:50 · 905 阅读 · 0 评论 -
Canvas的图形变换
在图形学中，一般先画出原形，再通过图像变换得到目的图形Canvas提供的图形变换API：位移：translate(x,y)旋转：rotate(deg)缩放：scale(se,sy)：不单只放大图形大小，也会放大其他属性!在Canvas的图形变换函数是叠加的，所以：绘制前：context.save()绘制后：context.restore() functi原创 2016-05-19 10:23:28 · 433 阅读 · 0 评论 -
Canvas填充样式fillStyle
渐变色线性渐变色： var grd=context.createLinearGradient(xstart,ystart,xend,yend)grd.addColorStop(stop,color)-stop:决定位置-color:颜色 window.onload=function(){ var can原创 2016-05-19 11:42:26 · 3769 阅读 · 0 评论 -
Canvas曲线绘制
context.arc( x,y,r, startingAngle,endingAngle, anticlockwise//true or false)moveTo(x,y)context.arcTo( x1,y1,x2,y2, r)贝塞尔二次曲线moveTo(x,y)//起点quadraticCurveTo(原创 2016-05-20 16:19:23 · 459 阅读 · 0 评论 -
Canvas文字渲染
context.font="文字样式"default："20px sans-serif"font包含：font-stylenormal：默认italic：斜体字oblique：倾斜体字font-variant normal：默认small-caps （小型大写字母代替小写字母）font-weightlighternormal：默认bol原创 2016-05-21 16:57:28 · 376 阅读 · 0 评论