原文地址:https://blog.csdn.net/qq_37674616/article/details/82702158
目录
画布
绘制步骤:
1.获取canvas元素
2.获取2d上下文对象
3.设置默认样式
4.设置线宽
lineWidth=3;在边框绘制的时候使用
5.绘制
状态:
save()
保存坐标、样式、阴影、线宽
restore()
恢复之前保存的样式
案例:绘制三个矩形，是最后一个样式与第一个相同
<canvas id="canvas" width="400px" height="400px">不支持时显示</canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.strokeStyle="blue";
context.strokeRect(10,10,100,100); //'blue'
context.save();//保存绘制的样式 blue
context.strokeStyle="orange";
context.strokeRect(10,120,100,100); //'orange'
context.restore(); //恢复到上一次保存的样式
context.strokeRect(120,120,100,100); //'blue'
context.stroke();
</script>绘制矩形
fillRect(startX,startY,w,h)
按fillSyle的样式显示填充的矩形。
strokeRect(startX,startX,w,h)
按 strokeStyle显示边框矩形。
clearRect(startX,startY,w,h)
用于清除矩形特定的区域。一般也用于清除画布。
示例
<style>
#canvas{
border-left: 2px solid rgba(0,0,0,0.5);
border-bottom: 2px solid rgba(0,0,0,0.5);
}
</style>
<canvas id="canvas" width="400px" height="400px">不支持该属性</canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.fillStyle="skyblue"; //填充色
context.strokeStyle='blue'; //边框色
context.fillRect(0,300,30,100); //绘制填充矩形
context.strokeRect(35,250,30,150); //绘制边框矩形
context.fillRect(70,230,30,170);
context.clearRect(80,265,10,100); //清除矩形某个区域面积
</script>
绘制路径
步骤:
1.设置路径
2.关闭路径
3.绘制
圆
1.设置路径
arc(圆心x,y,r,开始角度,结束角度,是否逆时针);true 逆时针 false 顺时针
2.关闭路径
closePath()
3.绘制
fill()
stroke()
示例
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.strokeStyle='blue';
context.fillStyle='orange';
context.lineWidth=3;
context.beginPath();
//参数 源圆心坐标 x y 半径 开始弧度,结束弧度,是否逆时针绘制 true逆时针
context.arc(100,100,50,0,Math.PI/2,true);
//结束路径
context.closePath();
//绘制
context.stroke();
//或者使用 context.fill() 绘制
直线
1.开始路径
beginPath();
2. 设置路径
moveTo(startx,starty);
lineTo(endx,endy)
3.关闭路径
closePath()
示例
<canvas id="canvas" width="400px" height="400px"></canvas><script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.strokeStyle="black";
context.lineWidth=2;
context.beginPath();
//起点坐标
context.moveTo(0,0);
//结束点坐标
context.lineTo(100,200);
context.lineTo(100,100);
context.lineTo(200,0);
context.closePath();
context.stroke();
</script>
曲线
beizerCurveTo(x1,y1,x2,y2,endx,endy);
//x1 y1 x2 y2 为控制点坐标
quadraticCurveTo(控制点x,控制点y,endx,endy);
示例
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.beginPath();
//起点坐标
context.moveTo(0,0);
//控制点的x,y 控制点 x y 结束点x y
// context.bezierCurveTo(200,10,200,300,400,400);
//参考的 x y 结束点 x y
context.quadraticCurveTo(150,10,200,200);
context.quadraticCurveTo(230,350,400,400);
context.closePath();
//绘制
context.stroke();
</script>
绘制文本
属性
align
表示文本对齐方式
type取值:start、end、left、center、right
textBaseline='type'
表示文本的基线。
type常用取值: top、middle、bottom
font
表示文本样式、大小及字体，用 CSS 中指定字体的格式来指定例如: 'bold 15px 宋体';
方法
fillText('内容',startx,starty,maxWidth);
strokeText('内容',startx,starty,maxWidth);
示例
<canvas id="canvas" width="400px" height="400px"></canvas>
<img src="" alt="">
<script>
var canvas = document.getElementById('canvas');
var img = document.getElementsByTagName('img')[0];
var context = canvas.getContext('2d');
//绘制文本
//参数 文本内容 开始x y 最大w
context.font = 'bold 20px 宋体';
context.textAlign = 'left';
context.textBaseline = '';
context.fillText('你好', 200, 200, 30);
context.beginPath();
context.moveTo(0, 200);
context.lineTo(200, 200);
context.closePath();
context.stroke();
//导出位图
var url = canvas.toDataURL('2.png');
img.src = url;
</script>
渐变
线性渐变
1.创建渐变
var gradient=createLinearGradient(xstart,ystart,xend,yend);
2.添加渐变颜色
addColorStop(偏移量,颜色);//偏移量 0-1
3.设置渐变
fillStyle=gradient;
径向渐变
创建步骤和线性渐变的步骤都相同
createRadialGradient(xstart,ystart,r,xstart,ystart,r);
示例
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//创建渐变对象
// var gradient=context.createLinearGradient(0,0,200,0);
//x,y r
var gradient=context.createRadialGradient(100,100,20,100,100,100);
gradient.addColorStop(0,'red');
gradient.addColorStop(0.5,'orange');
gradient.addColorStop(1,'blue');
context.fillStyle=gradient;
context.fillRect(10,10,200,200);
</script>变形
操作的是坐标轴
translate(x偏移量,y偏移量)
scale(x轴放大的倍数,y轴放大的倍数)
参数大于1 放大 参数小于1
rotate(角度)
默认顺时针旋转,如果想逆时针旋转设定负数
示例
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.fillStyle='red';
//x y 轴偏移量
context.translate(100,100);
//坐标轴旋转45度
//context.rotate(-Math.PI/4);
//x轴缩小一半,y轴不变
// context.scale(0.5,1);
context.fillRect(0,0,200,200);
context.fillRect(0,200,50,50);
console.log(context);
</script>
组合
设置新图形与旧图形的重叠方式和显示样式
context.globalCompositePeration='type'
type取值
source-over 默认 新图形在上
destination-over 旧图形在上
source-in 只显示新图形的重叠部分
destination-in 只显示旧图形的重叠部分
source-out 新的图形的不重叠部分
destination-out 旧图形的不重叠部分
source-atop 新图形的重叠部分和旧图形的不重叠部分
destination-atop 旧图形的重叠部分和新图形的不重叠部分
lighter 都显示 重叠部分加色处理
xor 都显示,重叠部分隐藏
copy 只显示新图形
示例
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = "blue";
context.fillRect(0, 0, 200, 200);
//设置重叠显示效果
context.globalCompositeOperation = 'lighter';
context.beginPath();
context.fillStyle = "orange";
context.arc(200, 200, 100, 0, Math.PI * 2);
context.closePath();
context.fill();
</script>
阴影
shadowOffsetX=4
x方向偏移
shadowOffsetY=4
y方向偏移
shadowColor='red'
阴影的颜色
shadowBlur=4
模糊距离
示例
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
var canvas=document.getElementById('canvas');
console.log(canvas);
var context=canvas.getContext('2d');
context.fillStyle="blue";
//x轴偏移量
context.shadowOffsetX=5;
//y轴偏移量
context.shadowOffsetY=5;
context.shadowColor='orange';
//阴影模糊距离
context.shadowBlur=10;
context.fillRect(0,0,200,200);
context.fill();
</script>
图像
drawImage(img节点,x,y);
原图绘制
drawImage(img节点,x,y,w,h);
缩放原图
context.drawImage(img节点,区域x,y,w,h,endx,endy,w,h);
复制图像的一部分绘制到指定位置,并设置宽高
示例
<canvas id="canvas" width="800px" height="600px"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//绘制图像
//1.创建图像对象
var img = new Image();
img.src = 'element.png';
console.log(img);
img.onload = function() {
//参数 img节点,和开始绘制的位置x和y
context.drawImage(img, 0, 0, 500, 500);
// 参数 img节点 局部位置x，y 宽 高,目标位置x y 宽 高
context.drawImage(img, 262, 235, 39, 17, 638, 292, 80, 40);
}
</script>
平铺
1.创建平铺对象
var pattern=context.createPattern(img节点,类型);
类型
no-repeat
repeat-x
repeat-y
repeat
2.使用
context.fillStyle=pattern;
示例
<canvas id="canvas" width="800px" height="600px"></canvas><script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//绘制图像
//1.创建图像对象
var img = new Image();
img.src = '1.png';
console.log(img);
img.onload = function() {
var pattern = context.createPattern(img, 'repeat');
context.fillStyle = pattern;
context.fillRect(0, 0, 300, 300);
context.fill();
}
</script>
裁剪
要放到绘制的中间，将图片裁剪到绘制的路径中。
1.创建路径
context.beginPath();
context.arc(100,100,100,0,Math.PI*2);
context.closePath();
2.context.clip()
3.绘制图片
context.drawImage(img,0,0);
示例
<canvas id="canvas" width="800px" height="600px"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//绘制图像
//创建一个圆的路径
context.beginPath();
context.arc(150, 150, 150, 0, Math.PI * 2);
context.closePath();
//裁剪
context.clip();
//1.创建图像对象
var img = new Image();
img.src = '1.png';
console.log(img);
img.onload = function() {
var pattern = context.createPattern(img, 'repeat');
context.fillStyle = pattern;
context.fillRect(0, 0, 300, 300);
context.fill();
}
</script>