canvas基础知识入门
2021-06-15 本文已影响0人
似朝朝我心
- canvas是浏览器的画布。
- 通过html5的canvas标签，可以创建一个画布，通常会绑定一个id属性，为了方便后去JS操作。
- canvas画布的大小是有其自身的width和height属性设置，该宽高属性且不需要单位，不需要用样式去特意指定其宽高，如果不指定画布的高和宽，默认是宽是300px，默认高是150px。
- canvas标签默认是行内块级元素，通常会用到display:block进行需求转换，比如让画布居中显示。
HTML创建画布
<canvas id="canvas" width="1024" height="768" style="background-color: bisque;margin: 0 auto;display: block;"></canvas>
JS绘制上下文
- 首先用到window.onload这个页面加载函数，让页面的加载的时候调用某个函数。
- 因为要做dom相关操作，所以需要获取canvas的id属性，返回一个canvas画布对象。
- 此外，需要创建2d的上下文绘制环境。
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
- 此外，你还可以使用canvas对象中的这2个属性来设置画布的宽高大小，不一定通过canvas标签来设定,实现的效果是一样的。
- 单论设置宽高这一属性，JS的优先级高于html标签（当canvas标签设置了宽高属性，而JS里面也设置宽高属性，生效的是JS里面设置的）。
canvas.width = 1024
canvas.height = 600
绘制一条线
- canvas是一种状态绘图，所以需要预先进行状态设置，然后调用绘图函数。
- 在最开始的时候我们创建了一个2d的绘制上下文的环境，返回的是ctx对象（context的缩写），而我们想要使用这个对象，只需要调用其给出的一些方法即可。
常用的属性或方法接口：
| 属性或函数 | 功能 | 案例使用 |
|---|---|---|
| moveTo() | 你想要让你手中画笔搁哪个位置上 | ctx.moveTo(100,100) |
| lineTo() | 绘制线条的跨越状态，从x轴开始，y轴结束,创建到达位置 (x,y)的一条线 | ctx.lineTo(100,600) |
| lineWidth | 设置线条的粗细，单位像素,省略 | ctx.lineWidth = 5 |
| strokeStyle | 设置线条的颜色，常用十六进制颜色的字符串 | ctx.strokeStyle= '#ffff00' |
| fillStyle | 选择填充颜色,采用rgb着色，搭配fill()方法使用 | ctx.fillStyle = 'rgb(11,101,125)' |
| fill() | 开始填充颜色（填充区域必须为闭合的多边形） | ctx.fill() |
| beginPath() | 开始一段新的路径（重新规划绘图路径），一般搭配closePath()函数使用，当我们在一个画布上想要绘制2个以上的多边形时，就需要使用beginPath()函数来进行路径划分 | ctx.beginPath() |
| closePath() | 关闭绘图路径(如果我们绘制的图形没有达到闭合状态，这个函数还会自动闭合图形，就是它会根据连接线条的首尾点进行闭合) | ctx.closePath() |
| fill() | 开始填充颜色（填充区域为闭合的多边形） | ctx.fill() |
| stroke() | 开始绘制图像 | ctx.stroke() |
通过多次调用lineTo()函数可以实现绘制任意多边形
比如绘制一个正方形
<canvas id="canvas" style="border: 1px slateblue solid;margin: 0 auto;display: block;"></canvas>
<script type="text/javascript">
window.onload = function(){
const canvas = document.getElementById('canvas')
canvas.width = 1024
canvas.height = 600
const ctx = canvas.getContext('2d')
ctx.lineWidth = 5
ctx.strokeStyle= '#550000'
ctx.moveTo(100,100)
ctx.lineTo(100,400)
ctx.lineTo(400,400)
ctx.lineTo(400,100)
ctx.lineTo(100,100)
ctx.fillStyle = 'rgb(85, 255, 255)';
ctx.fill()
ctx.stroke()
}
</script>
绘制一个三角形
<canvas id="canvas" style="border: 1px slateblue solid;margin: 0 auto;display: block;"></canvas>
<script type="text/javascript">
window.onload = function(){
const canvas = document.getElementById('canvas')
canvas.width = 1024
canvas.height = 600
const ctx = canvas.getContext('2d')
ctx.lineWidth = 5
ctx.strokeStyle= '#550000'
ctx.moveTo(100,100)
ctx.lineTo(100,500)
ctx.lineTo(500,100)
ctx.lineTo(100,100)
ctx.fillStyle = 'rgb(85, 255, 255)';
ctx.fill()
ctx.stroke()
}
</script>
</script>
demo案例：绘制一块七巧板
<body>
<canvas id="canvas" style="border: 1px slateblue solid;margin: 0 auto;display: block;"></canvas>
</body>
<script type="text/javascript">
//绘制七巧板数组,数组中每一个对象是一个独立的多边形
const tangram = [
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},//p数组为该多边形的顶点坐标
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594cf'},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}
]
window.onload = function(){//页面加载时执行
const canvas = document.getElementById('canvas')
canvas.width = 800 //设置画布的宽度
canvas.height = 800 //设置画布的高度
const ctx = canvas.getContext('2d') //创建2d的上下文绘制环境
for(let piece of tangram){ //遍历,取出tangram数组中的每一个对象
//console.log(piece)
draw(piece,ctx) //调用draw函数
}
}
//绘制图形函数
function draw(piece,ctx){
ctx.beginPath() //开始一个新的绘图路径
ctx.moveTo(piece.p[0].x,piece.p[0].y) //落笔位置
for(let item of piece.p){ //取出每个对象中的p数组部分
//console.log(item)
ctx.lineTo(item.x,item.y) //绘制线条跨越状态
}
ctx.closePath()//关闭绘图路径
ctx.fillStyle = piece.color//选择图形填充颜色
ctx.fill()//开始图像的填充着色
ctx.strokeStyle = 'black' //线条颜色
ctx.lineWidth = 3 //线条粗细
ctx.stroke()//绘制图形
}
</script>
绘制一段弧线
通过arc()函数绘制一条弧线的状态
arc()函数里面需要传入6个参数：
| 参数 | 解释 |
|---|---|
| centerx | 圆心的x坐标 |
| centerx | 圆心的y坐标 |
| radius | 圆的半径 |
| startingAngle | 从哪一个弧度值开始 |
| endingAngle | 从哪一个弧度值结束 |
| anticlockwise | 绘制弧形的方向，默认为false，可省略，默认是以顺时针方向绘制 |
顺时针绘制弧线，默认是从0 pi这个点开始,且这个PI值是固定的，并不会根据方向改变顺序:
绘制一个1.5个PI的弧线
<body>
<canvas id="canvas" style="border: 1px slateblue solid;margin: 0 auto;display: block;"></canvas>
</body>
<script type="text/javascript">
window.onload = function(){//页面加载时执行
const canvas = document.getElementById('canvas')
canvas.width = 800 //设置画布的宽度
canvas.height = 800 //设置画布的高度
const ctx = canvas.getContext('2d') //创建2d的上下文绘制环境
ctx.lineWidth = 5 //线条粗细
ctx.strokeStyle = '#ef1236' //线条颜色
ctx.arc(300,300,200,0,1.5*Math.PI) //绘制圆弧的状态
ctx.stroke() //开始绘制图形
}
</script>
如果是逆时针绘制，则是四分之一的圆弧
ctx.arc(300,300,200,0,1.5*Math.PI,true) //绘制圆弧的状态
逆时针绘制四分之三的圆弧
ctx.arc(300,300,200,0,0.5*Math.PI,true) //绘制圆弧的状态
深入理解beginPath()和closePath()绘制弧线，有意思的是closePath()函数会自动封闭路径(用线段连接起始端点)，如果我们不想路径封闭，则不需调用closePath()函数，而fill()函数是对图形进行填充，即使没有调用closePath()函数，也会自动封闭路径用线段连接起始端点进行填充。
<body>
<canvas id="canvas" style="border: 1px slateblue solid;margin: 0 auto;display: block;"></canvas>
</body>
<script type="text/javascript">
window.onload = function(){//页面加载时执行
const canvas = document.getElementById('canvas')
canvas.width = 1000 //设置画布的宽度
canvas.height = 800 //设置画布的高度
const ctx = canvas.getContext('2d') //创建2d的上下文绘制环境
ctx.lineWidth = 5 //线条粗细
ctx.strokeStyle = '#ef1236' //线条颜色
for(let i = 0;i < 10;i++){
ctx.beginPath()//重新规划绘图路径
ctx.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10,false) //绘制圆弧的状态
ctx.closePath() //关闭绘图路径
ctx.stroke() //开始绘制图形
}
//没有closePath()
for(let i = 0;i < 10;i++){
ctx.beginPath()//重新规划绘图路径
ctx.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10,false) //绘制圆弧的状态
ctx.stroke() //开始绘制图形
}
//逆时针绘制
ctx.fillStyle = 'aqua' //选择填充色
for(let i = 0;i < 10;i++){
ctx.beginPath()//重新规划绘图路径
ctx.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true) //绘制圆弧的状态
ctx.stroke() //开始绘制图形
ctx.fill() //开始填充
}
}
</script>
