文章目录
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f83913a21464430f55e3abf086634f21.gif#pic_center)
☀️作者简介:大家好我是言不及行yyds
🐋个人主页:言不及行yyds的CSDN博客
🎁系列专栏:【node】
canvas
又称2D绘图上下文2
1.画布元素及前置知识
在H5中canvas元素,都有一个上下文环境对象。用于绘制图像
//上下文环境对象,画布的容器
<canvas id="canvas" style="border: 1px solid red"></canvas>
<body>
<script>
//取得画布元素
var cvs=document.getElementById('canvas')
//得到运行环境,后面的绘制都需要用到它
var ctx=cvs.getContext('2d')
</script>
</body>
1.1坐标介绍
2D上下文的坐标原点在canvas的左上角。所有的坐标都相对于该点计算
设置的width和height用于确定画布的大小
1.2填充与描边
- 填充:指的是用指定的样式(颜色,图像等)来填充形状,就像是添加背景样式一样
- 描边:就是给图形界面的边界描边
- storkeStyle:描边
- fillStyle:填充
l两者的属性可以是 字符串(可表示颜色值),渐变图像或者图案对象
2.练习
2.1绘制不同颜色的三角形
- context.lineWidth=number用于设置线条的宽度,单位为PX
- context.strokeStyle=color用于设置笔触图形的颜色
- context.fillStyle=color用于设置填充颜色
- context.beginPath()用于开始一条路径,或者切断与上一个图形的联系
var cvs=document.getElementById('canvas')
var ctx=cvs.getContext("2d")
//设置绘制线条的宽度
ctx.lineWidth=5
ctx.strokeStyle="red"
//定义一个起点
ctx.moveTo(50,50)
//绘制第一个点
ctx.lineTo(150,50)
ctx.stroke()
//用于切断与其他点的联系。
ctx.beginPath()
//设置绘制图形的颜色
ctx.strokeStyle="green"
//重定向到第一条线段的终点,使图形有连接性
ctx.lineTo(150,50)
//绘制第二个点
ctx.lineTo(100,100)
ctx.stroke()
ctx.beginPath()
ctx.strokeStyle="yellow"
ctx.lineTo(100,100)
//绘制第三个点
ctx.lineTo(50,50)
ctx.stroke()
2.2绘制文字
- context.fillText( text , x , y , [max])
text:需要绘制的文字,x,y用于设置文字的位置,max用于设置最大宽度
- context.font="字体属性’ 用于设置字体名称与样式
- context.textAlign=“水平方位值”
用于设置文本内容的水平对齐方式 有 center | left | right
- context.textBaseline=“垂直方位值”
用于设置文本内容的水平对齐方式 有top | middle | bottom
- context.toDataURL(type,encoderOpetions) 用于设置图像的类别,以及图片质量
var cvs=document.getElementById('canvas')
var ctx=cvs.getContext("2d")
ctx.font="bold 20px 黑体 "
ctx.fillText('画布',50,50)
2.3绘制矩形及圆形
2.3.1绘制矩形
context.rect( x , y , width , height )
用于绘制从那个点开始绘制,绘制的宽高是多少
var cvs=document.getElementById('canvas')
var ctx=cvs.getContext("2d")
//设置填充样式
ctx.fillStyle="skyblue"
//设置描边样式
ctx.strokeStyle="red"
ctx.rect(30,30,50,50)
//描边
ctx.stroke()
//填充
ctx.fill()
2.4绘制圆形
1.context.arc( x , y , r , startAngle , endAngle , counterclockwise )
以(x,y)为圆心,r为半径
startAngle , endAngle为起始,结束的角度
counterclockwise表示是顺时针还是逆时针
2.arcTo( x1 , y1 , x2 , y2 , r )用于绘制从(x1,y1)到(x2,y2)的弧线
var cvs=document.getElementById('canvas')
var ctx=cvs.getContext("2d")
ctx.strokeStyle="red"
ctx.arc(80,80,50,0,2*Math.PI,false)
ctx.stroke()
ctx.beginPath()
2.5绘制图片
context.drawImage( image , x1, y1 , w1 , h1 , x2 , y2 ,w2, h2)
表示的是从指定的图片,指定的位置进行切割,并放置到指定的位置,指定的高宽
x1, y1 , w1 , h1表示源图像的x坐标,源图像的y坐标,源图像的高度,宽度
x2 , y2 ,w2, h2表示目标区域的x坐标,目标区域的y坐标,目标区域的高度,宽度
var cvs=document.getElementById('canvas')
var ctx=cvs.getContext("2d")
var img=new Image()
img.src='./test/1.jpg'
img.onload=function(){
ctx.drawImage(this,120,120,200,200,10,10,300,300)
}
剪切后的图片
2.6绘制阴影
- context.shadowColor:css颜色值,表示需要绘制的阴影颜色
- context.shadowOffsetX:阴影相对于形状或路径的x坐标的偏移量,默认值为0
- context.shadowOffsetY:阴影相对于形状或路径的y坐标的偏移量,默认值为0
- context.shadowBlur:阴影的模糊度
var cvs=document.getElementById('canvas')
var ctx=cvs.getContext("2d")
ctx.shadowOffsetX=10
ctx.shadowOffsetY=10
ctx.shadowOffsetBlur=5
ctx.shadowColor="rgba(0,0,0,0.5)"
ctx.fillStyle ="rgba(0,0,255,1)" ;
ctx.rect(30,30,100,100)
ctx.fill()
3.移动画不同圆(实践)
<body>
<canvas id="draw" width="800" height="800"></canvas>
<script>
const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#BADA55';
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 100;
//
//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let hue = 0;
let direction = true;
function draw(e) {
if (!isDrawing) return; // stop the fn from running when they are not moused down
console.log(e);
[lastX, lastY] = [e.offsetX, e.offsetY];
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
ctx.beginPath();
// start from
ctx.moveTo(lastX, lastY);
// go to
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
// [lastX, lastY] = [e.offsetX, e.offsetY];
hue++;
if (hue >= 360) {
hue = 0;
}
if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
direction = !direction;
}
if(direction) {
ctx.lineWidth++;
} else {
ctx.lineWidth--;
}
}
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
// [lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);
</script>
<style>
html, body {
margin:0;
}
</style>
4.总结
- 通过本文章,我们了解了怎么使用canvas,
- 学会了一些API及其含义。也通过一些例子,来展示怎么使用
- 通过一个综合案例来巩固基础
好了这次的文章就到这了
如果觉得还不错的话,帮忙点个关注吧
欢迎大家积极探讨