html canvas画背景图片,HTML5 canvas画布

canvas用途

游戏 小游戏

图表 报表 如 Charts插件

炫酷效果 banner

模拟器、图形编辑器 等

兼容性

IE9以上和其他浏览器

canvas 标签

属性

width

height

方法

getContext() 参数 2d/webgl

注意

css设置的宽高跟width/height设置的宽高 不同

Context环境

通过 getContext方法获取绘图环境(绘图上下文)(对象)

绘制图形通过该对象提供的方法/属性

基本绘图

路径

moveTo() 起始位置

lineTo() 直线 ，如果没有moveTo() 第一个lineTo()替代 moveTo()

路径的开始和关闭

beginPath() 开启路径

closePath() 关闭路径 结束当前的路径，自动闭合

注意： 复杂的图形，一定要开启和关闭路径

描边 stroke()

stroke() 方法

strokeStyle 设置描边颜色

lineWidth 设置描边的粗细

填充

fill() 填充

fillStyle 设置填充颜色

快速矩形工具

rect(x, y, width, height) 绘制矩形路径

strokeRect(x, y, width, height) 描边矩形

fillRect(x,y,width,height) 填充矩形

clearRect(x,y,w,h) 清除矩形 (矩形范围内的内容会被擦除)

圆形(圆弧)

arc(x,y,r,start, end, wise) 绘制圆弧

start/end是起始位置 单位是 弧度 ， 360角度 = 2PI， 180角度 = PI

最后一个参数 顺时针(false)/逆时针(true) 默认false

内容

文字方法

strokeText(text, x, y) 描边写字

fillText(text, x, y) 填充写字

measureText(text) 返回对象 包换文本的宽度

font 属性 设置 大小、字体 如 cxt.fon="100px MicrosoftYaHei";

textAlign 属性 水平对齐方式 start(默认)/end/center/left/right

textBaseline 属性 垂直对齐方式 alphabetic(默认)/top/bottom/middke/hanging/ideographic

绘制图片(插入图片)

插入图片

drawImage(img, x, y)

img image的dom元素

x,y 插入到 画布的位置 坐标

插入图片并改变大小

drawImage(img, x, y, width, height)

插入裁剪后的图片

drawImage(img, sx,sy,swidth,sheight, x, y, width, height)

sx/sy: 图片上开始裁剪的位置

swidth/sheight : 裁剪图片的大小

阴影

shadowColor 阴影颜色

shadowBlur 阴影的模糊值

shadowOffsetX 阴影的左偏移量

shadowOffsetY 阴影的右偏移量

渐变

线性渐变

var grd = cxt.createLinearGradien(x, y, x1, y1);

//参数：x,y起始坐标，x1,y1结束坐标

例如：

//创建线性渐变的对象，

var grd=ctx.createLinearGradient(0,0,170,0);

grd.addColorStop(0,"black"); //添加一个渐变颜色，第一个参数介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

grd.addColorStop(1,"white"); //添加一个渐变颜色

ctx.fillStyle =grd; //关键点，把渐变设置到 填充的样式

径向渐变

createRadiaGradient(x1, y1, r1, x2, y2, r2)

addColorStop()

把背景图片作为填充

createPattern(imgDom, repeate)

第二个参数 repeate/ repeat-x / repeat-y / no-repeat

变换

缩放

sacle(x, y)

位移

translate(x, y)

旋转

rotate(angle)

环境的保存和恢复

save()

restore()

设置透明

globalAlpha = number 设置不透明度

全局设置是对整个画布(绘图环境) 进行设置

限定绘图区域

clip()

输出base64编码

canvas.toDataURL(type, encoder)

type为mime类型 image/jpeg image/gif image/png image/webp

画布渲染画布

把一个画布以图片的形式用 drawImage() 插入到另一个画布

这是一种canvas的优化手段

设置线条

lineCap 属性 设置线条两端的形状 butt/round/square

lineJoin 属性 设置线条夹角 miter/bevel/round

miterLimit 属性 设置夹角斜角的最大长度 一般默认 10