简介
canvas 来源
html5新属性 使用JS API
兼容问题
IE8以下不支持
canvas
注意
不要使用CSS设置
canvas标签的宽高,使用自身宽高属性设置
作用
- 绘制线
- 绘制三角形
- 绘制矩形
- 绘制圆形
- 绘制图片
- 绘制视频
- 图片阴影
常用方法
绘制步骤：
一、拿到画布、画笔
<body>
<canvas id="canvas" width="500" height="500">
<p>您的浏览器不支持canvas标签，请升级至最新版本！</p>
</canvas>
</body>
<script type="text.javascript>
//获取到canvas标签
var canvas = document.getElementById('canvas');
//获取到上下文对象（画笔）
var ctx = canvas.getContext('2d');
</script>
二、绘制方法
ctx.beginPath();//开始绘制
ctx.moveTo(x, y);//放置起始点
ctx.lineTo(x, y);//放置中间点,可以放置多个
ctx.lineTo(x, y);
ctx.lineTo(x, y);
...
ctx.closePath();//结束绘制，会把终点和起点连起来
ctx.storke();//进行绘制线
ctx.fill();//进行填充
注意：1、当设置线宽和填充颜色时，会发生覆盖情况，没有优先级，由代码先后顺序决定（后面的代码会覆盖前面的代码）；
2、线宽是由中线往俩边增加宽度
绘制矩形
x: 起点x坐标； y: 起点y坐标； w: 矩形的宽； h: 矩形的高；
ctx.strokeRect(x, y, w, h);//按照矩形画线
ctx.fillRect(x, y, w, h);//按照矩形填充
绘制文字
ctx.font = '50px 黑体'；//设置字体大小、字体样式
ctx.strokeText('text', x, y, maxWidth=500);//描绘文字
ctx.fillText('text', x, y, maxWidth=500);//填充文字
绘制圆形
x: 圆心x坐标； y: 圆心y坐标； r: 圆的半径； startAngle: 开始弧度； endAngle: 结束弧度； direction: true（逆时针画线）/ false（顺时针画线）
ctx.arc(x, y, r, startAngle, endAngle, direction);
注意：绘制多个圆或半圆时，要设置ctx.beginPath();,否则每个圆会连起来
二次贝塞尔曲线
ctx.moveTo();//绘制起点
ctx.quadraticCurveTo(x2, y2, x3, y3);
//x2: 基准点x坐标； y2: 基准点y坐标； x3: 终点x坐标； y3: 终点y坐标；
ctx.stroke();//绘制线
三次贝塞尔曲线
ctx.moveTo();//绘制起点
ctx.bezierCurveTo(x2, y2, x3, y3, x4, y4);//x2: 基准点x坐标； y2: 基准点y坐标； x3: 基准点x坐标； y3: 基准点y坐标； x4: 终点x坐标； y4: 终点y坐标；
ctx.stroke();//绘制线
绘制图片
// 如果想把图片放到canvas中，需要向创建image对象
var img = new Image();
img.src = '地址';
img.onload = function(){
// 必须等图片加载完成才能开始绘制
`ctx.drawImage(img,起点x坐标，起点y坐标,图片在Canvas里的宽，图片在Canvas里的高);`
}
ctx.drawImage(img, x, y);
ctx.drawImage(img, x, y, w, h);
清除画布
x: 起点x坐标； y: 起点y坐标； w: 清除的宽； h: 清除的高；
ctx.clearRect(x, y, w, h);
变形
注意：改变了坐标系，不会影响已经绘制的内容
- 位移：
ctx.translate(x, y);//把原点移到(x, y)点 - 缩放：
ctx.scale(scaleX, scaleY); - 旋转：
ctx.rotate(Math.PI / 8);//单位是弧度
判断是否点中
var res = ctx.isPointInPath(x, y);//判断是否点中了某个区域
//注意：如果进行了描边，点击内部也会触发
var res = ctx.isPointInStroke(x, y);//判断是否点中了边框
常用属性
添加颜色
ctx.fillStyle = 'red';//填充颜色
ctx.strokeStyle = 'red';//线的颜色
线
ctx.lineWidth = 50;//线的宽度
ctx.lineCap = 'round';//线末尾形状
ctx.lineJoin = 'round';//当俩条边交汇，创建圆角边
文字
ctx.textAlign = 'start';//文字水平对齐方式
//值：start/left, center, end/right
ctx.textBaseline = 'top';//文字垂直对齐方式
//值： top, middle, bottom
ctx.font = '50px 宋体';//注意：单独设置字体大小不起作用，必须同时设置字体
阴影
ctx.shadowColor = 'red';//阴影颜色
ctx.shadowOffsetX = 10;//阴影X轴偏移量
ctx.shadowOffsetY = 10;//阴影Y轴偏移量
ctx.shadowBlur = 10;//阴影模糊程度
网友评论