Canva可画的用户可以将Epidemic Sound正版免版税的音乐，添加到他们通过Canva.cn创建的视频中；付费用户可以直接将这些带有音乐的视频，应用到商用场合。
Canva提供丰富的版权图片、原创插画以及各类优质设计模板。用户可以在选择喜欢的模板之后，通过简单修改即可在几分钟内创建出海报、简历、Banner、名片等各类设计。
canvas作为html中的一个标签，可以在网页上生成一块画布，其中，画布是网页的元素，但是画布上的东西不是，浏览器认为canvas是个图片，可以右键保存。在这里插入图片描述
画布有默认的宽和高，是300*150大小，画布的宽高不能通过style设置，只能通过canvas自己的属性设置。下面是一个基本画布的代码。
<style>
* {
margin: 0
padding: 0
}
canvas {
border:1px solid black
}
</style>
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
<body>
<canvas width="600" height="800"></canvas>
</body>
1
2
3
1
2
3
画笔是通过js编写的，画布的横纵坐标如下所示
在这里插入图片描述
下面通过代码认识画笔。
let canvas = document.querySelector('canvas') //获取画布元素
let ctx = canvas.getContext('2d') //创建画笔
console.log(ctx) //可以看到画笔的属性
ctx.moveTo(100,100)//画笔的起始位置
ctx.lineTo(200,200) //画笔的下一位置
ctx.lineTo(100,200)
ctx.fillStyle='red' // 图像填充颜色
ctx.strokeStyle = 'purple' // 线段颜色
ctx.lineWidth = '10'//线段宽度
ctx.fill() //展示属性
ctx.closePath()//闭合线段
ctx.stroke() //绘制！！放到最后写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
二、canvas绘制矩形
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
// 绘制矩形的第一种方法：描边矩形(矩形左上角的横坐标，矩形左上角的纵坐标，矩形长，矩形宽)
ctx.strokeRect(100,200,100,200)
// 第二种方法：填充矩形（参数含义相同） 默认黑色
ctx.fillStyle = 'pink'
ctx.fill()
ctx.fillRect(300,200,100,200)
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
三、canvas绘制圆形
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
// 绘制圆形
ctx.beginPath()
// 参数：x y r 起始弧度 结束弧度 是否逆时针绘制
// 对于弧度有个公示：360° = 2×PI
ctx.arc(100,100,50,0,2*Math.PI,true)
ctx.fillStyle = "red"
ctx.fill()
ctx.stroke()
// 绘制弧线
ctx.beginPath()
ctx.arc(200,200,50,1,2,false)
ctx.stroke()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
四、清除画布与绘制文字
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
ctx.fillRect(100,200,100,200)
// 清除画布
ctx.clearRect(100,200,50,50)
// 绘制文字
ctx.font = "20px 微软雅黑"
ctx.fillStyle = 'red'
ctx.fill()
ctx.fillText("绘制文字",50,20)
1
2
3
4
5
6
7
8
9
10
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）