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

作业

代码 1 遍 （01.html除外）

整理笔记（博客）

使用循环，画10行10列表格

画画板： 拖动鼠标，在canvas上划线

饼状图(把文字显示在上面)

附录 Canvas 案例

http://unclealan.cn/my/demos/

http://echarts.baidu.com/examples.html