美文网首页
canvas绘图方法总结

canvas绘图方法总结

作者: 晨光2016 | 来源:发表于2016-05-20 18:33 被阅读102次

getContext('2d') : canvas的2D绘图环境

【直线与方块】

1/fillRect(x,y,w,h) : 绘制背景方块,默认黑色

2/strokeRect(x,y,w,h) : 绘制边框方块,默认2像素,分别在l,t多加0.5边框就变成1像素了

3/fillStyle : 设置填充背景色

4/strokeStyle : 设置边框颜色

5/lineWidth : 设置边框粗细

6/lineJoin : 边界连接点样式( round为圆角,bevel为斜角 )

【路径】

1/beginPath() : 开始绘制

2/closePath() : 结束绘制,闭合路径

3/moveTo(x,y) : 移动坐标

4/lineTo(x,y) : 定义坐标点的位置

5/stroke() : 用线条连接坐标点

6/fill() : 用背景填充坐标点

7/rect(x,y,w,h) : 方块坐标连接,相当于lineTo方法的集合

8/clearRect(x,y,w,h) : 清除痕迹

9/save()和restore() : 保存和恢复路径,两者配合使用,分别放在开头和结尾位置,避免同一画布里方法公用,相当于js中的变量作用域

10/lineCap : 线条的端点样式( round为圆角,square直角,但它的高度多出为宽的一半 )

【曲线】

1/arc(x,y,r,startR,endR,false) : 绘制圆弧的方法,参数(x坐标,y坐标,半径,开始弧度,结束弧度,顺时针或逆时针,false为顺,true为逆,弧度=角度*Math.PI/180;)

2/arcTo(x1,y1,x2,y2,r) : 2组坐标加半径

3/quadraticCurveTo(dx1,dx2,x1,y1) : 1个控制点加1个坐标点,贝塞尔曲线1

4/bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1) : 2个控制点加1个坐标点,贝塞尔曲线2

【变换】

1/translate(x,y) : 偏移原点坐标

2/rotate(弧度) : 角度*Math.PI/180

3/scale(x,y) : 为1为临界点,大于则放大,小于则缩小,x和y相同为等比缩放

【图片与背景】

1/drawImage(obj,x,y) :图片加载完后调用的方法

2/createPattern(obj,repeat) : 画布背景

3/createLinearGradient(x1,y1,x2,y2……) : 线性渐变背景

4/createRadialGradient(x1,y1,r1,x2,y2,r2……) : 放射性(径向)渐变背景

5/addColorStop(0~1,color) : 渐变点,2个或以上组成

【文本】

1/fillText(txt,x,y) : 文本颜色

2/textBaseline : 对齐方式,top,middle,bottom,默认是baseline

3/strokeText(txt,x,y) : 文本描边

4/measureText(txt).width : 文本居中方法

5/shadowOffsetX : 阴影的水平方向偏移

6/shadowOffsetY : 阴影的垂直方向偏移

7/shadowColor : 阴影颜色

8/shadowBlur : 阴影模糊半径( 高斯模糊 )

【像素点】

更新中……

【合成】

更新中……

相关文章

  • canvas绘图方法总结

    getContext('2d') : canvas的2D绘图环境 【直线与方块】 1/fillRect(x,y,w...

  • 二十二、Android绘图基础Canvas、Paint等

    Canvas 重新onDraw(Canvas canvas)方法时涉及绘图API :CanvasCanvas绘制方...

  • canvas画图

    基本用法 canvas元素 获取绘图功能对象 canvas绘图方法 context.fill() // 填充co...

  • 2019-08-28 canvas

    canvas和SVG的区别:canvas使用它提供的方法来绘图,绘图API简洁。SVG通过构建XML元素数绘图,对...

  • canvas

    getContext:在使用canvas元素上绘图,需要先调用canvas的getContext方法,并传入上文的...

  • canvas绘图总结

    最近有个三维地图的项目,没有模型,决定先用图片顶上。但是交互的时候,发现有个问题,就是鼠标高亮某个区域时,这个效果...

  • canvas系列(1)创建canvas、绘制路径、绘制圆弧

    1、定创建canvas画布 2、绘制直线canvas绘图是基于状态的,然后在调用方法来绘图 效果图: 3、绘制三角...

  • Canvas绘图基础

    Canvas坐标系和绘图坐标系 Canvas绘图中牵扯到两种坐标系:Canvas坐标系与绘图坐标系。 Canvas...

  • 小程序分享

    canvas绘图 onShareAppMessage()方法1、在页面中调用wx.hideShareMenu()2...

  • canvas基础部分

    一、canvas的绘图表面 canvas有两种尺寸 canvas元素自身元素的尺寸 canvas绘图表面的尺寸 如...

网友评论

      本文标题:canvas绘图方法总结

      本文链接:https://www.haomeiwen.com/subject/yrmnrttx.html