当前位置：首页 > news >正文

canvas使用

news 2025/7/29 12:17:02

canvas使用

1 canvas绘制基本

1 概念

HTML5<canvas>元素用于图形的绘制，区别于css,它的绘制通过javascript来完成绘制的

<canvas>标签只是图形容器，必须使用及保本来绘制图形

Canvas API主要聚焦与2D图形。同时<canvas>元素的WebGL API则用于绘制硬件加速的2D和3D图形

2 绘制矩形

<canvas id="canvas" width="200" height="200"></canvas>
<script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象，该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');/* 填充颜色 */ctx.fillStyle = '#ff2d51';/* 绘制矩形fillRect(x,y,width,height) x,y 分别是横轴 纵轴起点位置，width height 表示绘制的宽，高大小*/ctx.fillRect(10,10,100,100);
</script>

3 canvas中的坐标

canvas是一个二维网络

canvas的左上角坐标为（0,0）

绘制矩形fillRect(x,y,width,height) x,y 分别是横轴纵轴起点位置，width height 表示绘制的宽，高大小

4 绘制途径

所谓的路径：就是连续的坐标点的集合

在canvas上画线，可以使用一下两种方法

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

绘制线条必须使用到stroke()方法，执行绘制

<canvas id="canvas" width="200" height="200"></canvas>
<script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象，该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');/* 绘制路径 */ctx.moveTo(0,0)ctx.lineTo(100,100)/* 填充颜色 */ctx.strokeStyle = '#ff2d51';ctx.stroke();
</script>

5 绘制圆

<canvas id="canvas" width="200" height="200"></canvas>
<script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象，该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(100,100,50,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = '#ff2d51';ctx.fill();/* 边颜色 */ctx.strokeStyle = '#333';/* 边宽 */ctx.lineWidth = 5;ctx.stroke();
</script>

1 绘制多个圆

<canvas id="canvas" width="400" height="400"></canvas>
<script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象，该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(200,200,100,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = '#ff2d51';ctx.fill();// 后绘制 覆盖先绘制的ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(200,200,50,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = '#333';ctx.fill();ctx.stroke();
</script>

2 绘制动画的圆

<canvas id="canvas" width="400" height="400"></canvas>
<script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象，该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');var increateFlag = true;var radius = 50function draw(){/* 清除指定矩形内的形状 */ctx.clearRect(0,0,canvas.width,canvas.height)/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(200,200,radius,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = '#ff2d51';ctx.fill();ctx.stroke();if(radius > 100){increateFlag = false;}else if(radius < 50){increateFlag = true;}if(increateFlag){radius++;}else{radius--;}}// draw();setInterval(draw,20);
</script>

3 绘制多圈动画

<canvas id="canvas" width="400" height="400"></canvas><script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象，该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');var increateFlag = true;var radius = 50function draw(){/* 清除指定矩形内的形状 */ctx.clearRect(0,0,canvas.width,canvas.height)/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(200,200,radius,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = '#ff2d51';ctx.fill();// 后绘制 覆盖先绘制的/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(200,200,25,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = 'blue';ctx.fill();ctx.stroke();if(radius > 100){increateFlag = false;}else if(radius < 50){increateFlag = true;}if(increateFlag){radius++;}else{radius--;}}// draw();setInterval(draw,20);</script>