CANVAS 简介

canvas简介

什么是canvas

canvas是一个html标签，但是给js提供了接口，通过js代码可以在canvas元素上画图

canvas的应用

• 游戏
• 炫酷效果、banner
• 报表，可视化数据
• 地图
• 图形编辑器、模拟器

#canvas 基础

canvas 元素

属性

• width
• height

方法

• getContext() 获取绘图环境 参数2d,webgl

绘图环境2d

• 坐标 x左标 y坐标
• 原点 左上角

Canvas 基本会话

路径开始和闭合

• beginPath() 开启新的路径(状态) 并且结束前面的路径
• closePath() 结束当前路径 并且使当前路径闭合

线

• moveTo(x, y) 起始点坐标
• lineTo(x, y) 绘制直线（接着上一个点）

快速矩形工具

• rect(x, y, w, h) 绘制矩形的路径
• strokeRect(x,y,w,h) 绘制描边的矩形
• fillStyle(x,y,w,h) 绘制的填充的矩形
• clearRect(x,y,w,h) 清除矩形（绘制的矩形区域内的内容将被擦除）

画圆(弧)

• arc(x,y,r,start, end, true/false)
  最后一个参数是表示 顺时针(false)还是逆时针(true) 默认false

文字

• font 属性 设置大小和字体
• textAlign 属性 文字的水平对齐方式 start(默认)/end/left/right/center
• textBaseLine 属性 文字的垂直对齐方式 alphabetic(默认)/top/bottom/middle
• fillText(text, x, y) 填充文字
• strokeText(text, x, y) 描边文字
• measureText(text) 返回改文本在画布中所占的宽度

描边

• stroke() 填充当前路径
• strokeStyle 属性 设置描边颜色
• lineWidth 属性 设置描边线条宽度

填充

• fill() 填充当前的路径
• fillStyle 属性 设置填充的颜色
• 注意： 非0环绕的算法

清除画布

• 使用 clearRect()
• 重新设置 canvas的宽度 canvas.width=canvas.width

附录 Canvas 案例

• http://unclealan.cn/my/demos/
• http://echarts.baidu.com/examples.html

转载于:https://my.oschina.net/u/3502339/blog/1036932