一、Canvas概述
- Canvas API(画布)用于在网页实时生成图像,并且可以操作图像的内容。
- 使用前,要先创建一个canvas网页元素,即
<canvas></canvas>
。所需功能全由js代码实现。
二、Canvas常见属性
height和width
- 表示的是canvas绘制区域的宽高。
- 注意:不要直接使用style给canvas元素设置宽高(若是使用style设置,那么久表示的是元素的大小)
<canvas id="canvas"></canvas>
<script>
var sw = screen.availWidth;
var sh = screen.availHeight;
//获取canvas对象
var canvas = document.querySelector('canvas');
//设置canvas的宽高属性
canvas.width = sw;
canvas.height = sh;
三、Canvas常见方法
1.getContext()----返回绘制模型
var context = canvas.getContext(contextType);
var context = canvas.getContext(contextType, contextAttributes);
- 参数说明
- contextType—String类型
- 若参数为’2d’:会创建并返回一个CanvasRenderingContext2D对象,主要用来进行2d绘制,也就是二维绘制,平面绘制。
- 若参数为’webgl’或’experimental-webgl’:返回一个WebGLRenderingContext对象,WebGL(全写Web Graphics Library)是一种3D绘图协议,可以为HTML5 Canvas提供硬件3D加速渲染。
- contextAttributes(可选)—Object
<canvas id="canvas"></canvas>
<script>
//创建2d模型
var context = canvas.getContext('2d');
</script>
2.toDataURL()----将画布转化为base64格式的图片
canvas.toDataURL(mimeType, quality);
- mimeType表示需要转换的图像的mimeType类型。默认值是image/png,还可以是image/jpeg,甚至image/webp(前提浏览器支持)等。
- quality表示转换的图片质量。范围是0到1。此参数要想有效,图片的mimeType需要是image/jpeg或者image/webp,其他mimeType值无效。默认压缩质量是0.92。
<canvas id="canvas"></canvas>
<script>
//转化图片
console.log(canvas.toDataURL('image/jpeg', 0.6));
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a2f23a162c2c8878b4d4ce5d4c686106.png)