cancvs
基本概念
- H5新增特性,双闭合标签,元素在网页上用js绘制图像。只是图形容器,相当于一个画布
- 默认宽高是300*150
- 浏览器认为cancvs是一张图片
- 给cancvs画布添加文本内容是不生效的
- 给cancvs标签添加子节点是没有意义的
- cancvs标签必须指定高度,宽高必须通过标签的属性(width、height)来设置,不能通过样式进行设置
- 想在cancvs画布中绘制图形、显示文字都必须通过js完成,通过js的“笔”来完成。
基本使用
cancvs在html是一个标签,在js中获取到的是一个对象
<canvas width="600" height="400"></canvas>
// 获取canvas标签
let canvas = document.querySelector('canvas');
// 获取canvas的笔(上下文)
let ctx = canvas.getContext('2d');
// ctx是一个对象,身上有很多属性和方法供我们操作canvas
//绘制线段
// 控制线段的起点的设置
ctx.moveTo(100, 100)
//其他点的设置,可以有多个
ctx.lineTo(100, 200)
ctx.lineTo(100, 200)
// 设置起点和最终的结束点连接在一起
ctx.closePath()
// 设置图像的填充的颜色
ctx.fillStyle = "red"
ctx.fill()
// 设置图像边框的颜色
ctx.strokeStyle = "green"
// 设置图像边框的宽度
ctx.lineWidth = "20"
// stroke方法绘制线段
ctx.stroke()
// 绘制矩形
// 第一种方式:绘制线段矩形 ctx.strokeRect(矩形距离x轴的距离, 矩形距离y轴的距离, 矩形的宽, 矩形的高)
ctx.strokeRect(100, 200, 100, 200)
// 第二种方式:填充颜色的矩形,默认是黑色,用fillStyle、fill更改颜色,要放在绘制矩形的前面
ctx.fillStyle = "yellow" //定义设置的是什么颜色
ctx.fill() //开始填充颜色
ctx.fillRect(300, 200, 100, 200)
// 绘制圆形
// 开始绘制圆
ctx.beginPath();
// 绘制圆形的方法 arc(圆心距离x轴的距离,圆心距离y轴的距离,圆的半径,起始的弧度,结束的弧度,是否逆时针绘制(逆时针true,顺指针false))
// 360°=2*PI*弧度
ctx.arc(100,100,50,0,2*Math.PI,true)
// 绘制圆
ctx.stroke()
API
(一) 方法:
getContext(“2d”) 创建绘图对象
beginPath(); 开始绘制路径
closePath(); 结束绘制路径,闭合线框
moveTo(x,y); 移动到绘制起点
lineTo(x,y); 画线段到指定点
arc(x,y,r,start,end); 绘制圆形(弧度单位)
quadraticCurveTo(x,y,endX,endY) 二次贝塞尔曲线
bezierCurveTo(x1,y1,x2,y2,endX,endY) 三次贝塞尔曲线
stroke(); 线条类型
fill(); 填充类型
fillRect(x,y,w,h) 填充矩形
strokeRect(x,y,w,h) 线框矩形
clearRect(x,y,w,h) 清除矩形
strokeText(string,x,y) 绘制线条文字(空心)
fillText(string,x,y) 绘制填充文字(实心)
drawImage(img,x,y,width,height) 绘制图片(需在img的load函数中)
save() 保存当前状态设定
restore() 恢复到保存之前的状态设定
rotate() 旋转画布角度(弧度制)
(二) 属性:
fillStyle 填充颜色(支持rgb(),#fff,red)
strokeStyle 线条颜色
lineWidth 线条宽度(整数值,默认单位px)
lineJoin 折线拐角类型 (round表示圆角)
font 支持多个值, 例如"10px 宋体"
textBaseline 文字基点(默认bottom坐下为基准点, top为左上)
globalCompositeOperation 绘制合成(具体值参考附件)