Canvas简介
Canvas是HTML5新推出的绘图组件,类似于一个布局于页面上的画布,通过构建画笔,给画笔添加粗细,颜色,实现绘制路径、图形、字符等功能。
Canvas基础组成
Canvas上下文环境Context
Canvas是画布,Context是接口,JavaScript是操作,JavaScript并不能直接操作Canvas。JavaScript是通过Context接口实现对Canvas的操作。
(Context也可称为画笔)
//并不是创建画布,而是判断当前浏览器是否支持canvas
canvas.getContext();
//2D画布使用"2d",3D画布则使用"WebGL"
canvas.getContext("2d");
Canvas路径
坐标系
canvas的坐标系是一个平面直角坐标系,坐标系原点在canvas标签的左上角,向右为X轴的正方向,向下为Y轴的正方向。
路径绘制流程
开启路径:beginPath();
绘制起点:moveTo(x,y);
绘制线条:lineTo(x,y);
绘制终点:closePath();
综上,绘制一条简单的线条主要要经过如下步骤:
//创建画布
let canvasItem = document.getElementById("画布组件的id");
let canvas = canvasItem.getContext("2d");
//开启路径,绘制线条,关闭路径
canvas.beginPath();
canvas.moveTo(0,0);
canvas.lineTo(10,10);
canvas.lineTo(0,10);
canvas.clothPath();
//路径描边
canas.stroke();
注意:绘制完路径后,实际上画布并没有视觉上的内容,路径需要进行描边后方可显示。
Canvas的快速绘制
绘制矩形
//创建画布
let canvasItem = document.getElementById("画布组件的id");
let canvas = canvasItem.getContext("2d");
//绘制矩形,weight和height单位都是px
canvas.rect(x, y, width, height);
//快速绘制描边矩形
canvas.strokeRect(x, y, width, height);
其中,描边矩形绘制完会自动进行描边,但是普通的rect()只会绘制路径。
矩形快速消除:
//当前矩形区域内的内容清空
canvas.clearRect(x, y, width, hegiht);
绘制圆形
//用于绘制圆形或者半圆
//sAngle:绘制开始的角度;eAngel:结束的角度;counterclockwise:是否是逆时针。
canvas.arc(x,y,r,sAngle,eAngle,counterclockwise);
绘制文字
//先设置字体样式
ctx.fillStyle = 'red';
ctx.font = '16px "微软雅黑"';
ctx.textBaseline = 'bottom';
ctx.textAlign = 'left';
两种绘制文字的方式:
//绘制文字,描边并填充
canvas.strokeText( "left", 100, 200 );
//仅绘制文字
canvas.fillText('Top-g', 100, 200);
Canvas的各类功能
样式的存储和复原
//将当前的样式保存到内存中
canvas.save();
//将之前的保存的样式进行复原
canvas.restore();
转换方式 | 说明 |
---|---|
translate(x,y) | 移动参考画布(0,0) |
scale(x%,y%) | 对画布内容进行缩放 |
rotate(弧度) | 旋转参考画布(0,0) |
总结
canvas绘制流程一般为:
创建上下文环境,即画笔(getContext)-->开启路径(beginPath)-->选定路径起点(moveTo)-->选择路径经过的点(lineTo)-->选择路径渲染方式(fill 或 stroke)-->结束路径(closePath)-->渲染(stroke)