![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 676 阅读 · 0 评论 -
Canvas绘制线段和圆
Canvas默认 300px*150px Title var canvas = document.getElementById("canvas"); var context=canvas.getContext("2d"); /*****************************绘制直线*****************原创 2016-05-15 18:12:50 · 873 阅读 · 0 评论 -
Canvas的图形变换
在图形学中,一般先画出原形,再通过图像变换得到目的图形Canvas提供的图形变换API:位移:translate(x,y)旋转:rotate(deg)缩放:scale(se,sy):不单只放大图形大小,也会放大其他属性!在Canvas的图形变换函数是叠加的,所以:绘制前:context.save()绘制后:context.restore() functi原创 2016-05-19 10:23:28 · 404 阅读 · 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 · 3717 阅读 · 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 · 427 阅读 · 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 · 345 阅读 · 0 评论