Canvas
Canvas 是 HTML5 提供的一种新标签,它是一个矩形区域的画布,可以用 JavaScript 在上面绘画。控制其每一个像素。
标签语法和属性
- 可以设置 width 和 height 属性,但是属性值单位必须是 px,否则忽略。
默认 300*150 像素 - 不要用 CSS 控制它的宽和高,图片会拉伸,重新设置 canvas 标签的宽高属性会让画布擦除所有的内容。
获取上下文
-
var canvas = document.getElementById('cavsElem'); var ctx = canvas.getContext('2d');
基本的绘制路径
canvas 坐标系,从最左上角(0,0)开始。x 向右增大, y 向下增大
- beginPath():开始路径
- moveTo(x, y):设置绘制起点
- lineTo(x, y): 绘制直线
- closePath():闭合路径
- stroke():描边
- fill():填充
-
绘制矩形
width, height:指的是绘制的矩形的宽和高- fillRect(x, y, width, height):绘制一个填充的矩形
- strokeRect(x, y, width, height):绘制一个矩形的边框
- clearRect(x, y, widh, height):清除指定的矩形区域,然后这块区域会变的完全透明
-
绘制圆
- arc(x, y, r, startAngle, endAngle, anticlockwise):(x,y)为圆心,r为半径,从 startAngle 弧度开始到endAngle弧度结束,ewise 是布尔值,true 表示逆时针,false 表示顺时针(默认是顺时针)
- arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧,最后再以直线连接两个控制点。
-
绘制文本
- font :定义字体,可定义大小,字体类型
- fillText(text,x,y):绘制实心的文本
- ==strokeText(text,x,y) ==:绘制空心的文本
- textAlign 文本对齐选项
- ==textBaseline == 基线对齐选项
- direction 文本方向
-
绘制图片
-
var img = new Image(); // 创建一个<img>元素 img.src = 'myImage.png'; // 设置图片源地址 创建图片
- drawImage(img,x,y):img是绘制图片的dom对象,x,y为图片左上角位置
- drawImage(img,x,y,width,height):可规定宽高
- context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height):图片裁剪
添加样式颜色
- fillStyle 设置或返回图形的填充颜色
- strokeStyle设置或返回图形轮廓的颜色
状态的保存和恢复
- save():保存当前环境的状态,可以把当前绘制环境保存到缓存中。
- restore():返回之前保存过的路径状态和属性,获取最近缓存的 ctx
变换
-
缩放
scale(scalewidth,scaleheight):scalewidth : 缩放当前绘图的宽度,scaleheight : 缩放当前绘图的高度
注意:缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小。 -
旋转
rotate(angle):旋转当前的绘图,参数为旋转的角度(弧度),是顺时针方向的,旋转的中心是坐标原点
画布渲染画布
drawImage(img,x,y):img 参数也可以是画布,把一个画布整体的渲染到另外一个画布上