文章目录
提示：以下是本篇文章正文内容，下面案例可供参考
一、什么是canvas？
由js代码实现功能,在 <canvas> 元素上进行绘图的一种绘图API。
<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
如一些数据分析表，写特效，写网页游戏，地图API等都会用到canvas
canvas自带两个属性值：width和height，为canvas 绘制区域的宽高
注意：不要直接使用style给canvas设置宽高（元素的大小）
二、Canvas接口
1. 方法
（1）getContext （） 返回绘制模型
参数为2d，返回CanvasRenderingContext2D ，二维平面绘图
<body>
<canvas id="canvas"></canvas>
<script>
var sw=screen.availWidth;
var sh=screen.availHeight;
//获取canvas对象
//设置canvas宽高尺寸
canvas.width=sw;
canvas.height=sh;
//创建2D模型
var context=canvas.getContext('2d');
</script>
</body>
参数为webgl，3D绘图，加速渲染3D 模型，前提是浏览器需要支持WebGL
（2）toDataURL（） 将画布转化为Base64图
默认值为image/png,还可以是image/jpeg
//转化图片
console.log(canvas.toDataURL('image/jpeg',0.6));
2. 2D模型的方法
属性：
1.在对象CanvasRenderingContent2D的原型对象上可以添加方法，直接调用
2.context.canvas 返回当前操作的canvas对象（只读属性）
| 属性 | 作用 |
|---|---|
| fillStyle | 填充样式 默认颜色#000 |
| strokeStyle | 描边样式 默认黑色 |
| font | 设置 绘制文本字体控制 默认10px |
| globalAlpha | 设置全局透明度 0-1 |
| globalCompositeOperation | 改变canvas绘图的混合模式 |
| lineCap | 线条端点的样式 |
| lineJoin | 线条转角的样式 |
| lineWidth | 设置线宽 |
| shadowBlur | 阴影的模糊程度 |
| shadowColor | 阴影的颜色 |
| shadowOffsetX | 阴影x方向偏移 |
| shadowOffsetY | 阴影y方向偏移 |
| textAlign | 绘制文本的对齐方式 |
| textBaseline | 绘制文本的基线方式 |
方法：
| 方法 | 作用 |
|---|---|
| fillText | 绘制纯文本 |
| strokeText | 绘制描边文本 |
| fill | 内部填充 |
| stroke | 填充描边 |
| arcTo | 绘制圆弧 |
| bezierCurveTo | 绘制贝塞尔曲线 |
| fillReact | 绘制区域 |
| clearReact | 清除区域 |
| clip | 剪裁 （先设置裁剪路径） |
| createImageData | 创建image图像数据 |
| putImageData | 绘制imageData对象到指定位置 |
| save | 保存当前canvas的状态在 栈的最上面 |
| restore | 一次从栈的上面 取出canvas的状态 |
1.fillText 填充文字
//绘制文本 从底向上绘制
conText2D.font='50px 宋体'; //加字体才会显示大小
conText2D.fillStyle='red';
conText2D.globalAlpha=0.5; //透明
conText2D.shadowBlur=2; //阴影模糊程度
conText2D.shadowColor='blue';
conText2D.shadowOffsetX=5;
conText2D.shadowOffsetY=5;
conText2D.fillText('Hello World!',60,60,400);
//(60,60,400)分别为起始坐标和最大限宽 x,y坐标从左下角开始算起
2.strokeText 描边文字
conText2D.beginPath();
conText2D.strokeStyle='blue';
conText2D.font = '50px 宋体';
conText2D.strokeText('描边文字',500,100,300);
conText2D.closePath();
