H5画布 canvas

moveTo(x, y) 移动
lineTo(x, y)划线
fillStyle = "color" 更改填充颜色
fill()填充
strokeStyle = "color" 更改描边样式
stroke()描边

矩形

fillRect(x, y, w, h)填充矩形(没有路径)
strokeRect(x, y, w, h) 描边矩形(没有路径)
rect(x, y, w, h)举行路径
clearRect(x, y, w, h)清空区域

arc(cx, cy, r, startDegree, endDegree, anticlockwise) 圆心x,圆心y,半径,起始角度(弧度制),结束角度(弧度制),是否逆时针
fill() 填充

文本

font = "字号 字体"
textAlign = "left/center/right"竖轴对齐方式
textBaseline ="top/middle/bottom" 横轴对齐方式
fillText('文字', x, y) 填充文字
strokeText('文字', x, y)描边文字
measureText('文字') 返回文字长度(width)
beginPath()开始路径
closePath() 闭合路径
线条样式
lineCap = "round/butt(默认)/square" 更改线帽
lineJoin = "round/miter(默认)/bevel(切角)" 更改连接点样式
lineWidth = 20 线宽

阴影

shadowColor 设置或返回阴影颜色
shadowBlur 设置或返回阴影模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY设置或返回阴影距形状的垂直距离

渐变

createLinearGradient(x0, y0, x1, y1)创建线性渐变 起始位置 结束位置(用在画布内容上)
createPattern(img, "repeat|repeat-x|repeat-y|no-repeat")在指定的方向上重复指定的元素
createRadialGradient(x0, y0, r0, x1, y1, r1)创建径向渐变 起始位置 结束位置(用在画布内容上)
addColorStop(位置, 颜色) 规定渐变对象中的颜色和停止位置(0~1)

画图

drawImage(img, x, y)在画布上绘制图像、画布或视频
drawImage(img, x, y, width, height)
drawImage(img, sx, sy, swidth, sheight, x, y, width, height) 剪切图像,并在画布上定位被剪切的部分 。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 3,867评论 2 29
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 2,994评论 3 40
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 1,070评论 0 4
  • canvas用途 游戏 小游戏 图表 报表 如 Charts插件 炫酷效果 banner 模拟器、图形编辑器 等...
    飞鱼_JS阅读 518评论 0 2
  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 6,715评论 1 3
  • 坚持,不是一件容易的事。这么多年来,不是没有想要坚持的事情。 01 比如减肥这件事,每隔几个月都要提一下。也许是买...
    珏音Raya阅读 356评论 0 0
  • 2017/7/17 94/100 今天我好似被施了魔法,一坐在你旁边不说话你前几天不会做的数学题读2遍都会做...
    Ivyf阅读 146评论 0 1