html5之canvas绘制图像

技术2022-07-15 82

canvas介绍

很多人都不知道canvas到底是做什么用的，在项目中如何使用，下来给大家介绍一下canvas能做什么。 canvas是HTML5中的新元素，你可以使用dujavascript用它来绘制图形、图zhi标、以及其它任何视觉性图像。它也可用于创dao建图片特效和动画。如果你掌握了完整的命令，你可以用canvas创建丰富的web应用程序。如果你想很好的使用canvas，你首先应该很好的掌握javascript。

canvas使用

首先我们来创建一个画板出来，画板上有什么就需要你自己去加进去了

<canvas id='myCanvas' width="800" height="600">不支持canvas元素，更新浏览器</canvas>

上面代码我是我是创建了一个画板，指定了画板的宽度和高度，因为canvas 是HTML5新增的标签，所以canvas 是不支持低版本的浏览器的，（比如IE8以下的都不支持），我们在标签里面提示浏览器不支持。

// 使用 id 来寻找 canvas 元素 var canvas = document.getElementById('myCanvas') //创建 context 对象 var context =canvas.getContext('2d') //给所绘制的图形添充颜色 context.fillStyle='#ff0000', //规定形状、位置、尺寸，第一个参数是Y左边，第二个是X坐标，第三个是宽，第四个是高 context.fillRect(10,30,100,120)

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。画一个圆形

// 使用 id 来寻找 canvas 元素 var canvas = document.getElementById('myCanvas') //创建 context 对象 var context =canvas.getContext('2d') //beginPath()定义一个新的路径绘制动作的开始 context.beginPath() //创建弧/曲线（用于创建圆形或部分圆）四个参数arc(x,y,r,start,stop) context.arc(95,50,40,0,2*Math.PI); //绘制线路（相当于那笔把上面的各个点连接起来） context.stroke()

上面代码就是在画布上画一个简单的圆形图案。

//画直线 var canvas = document.getElementById('myCanvas') var context =canvas.getContext('2d') context.beginPath() //起始点moveTo(x,y) context.moveTo(100,150), //目标点lineTo(x,y) context.lineTo(200,150), context.stroke()

下面来画二次贝塞尔曲线，首先来简单了解一下什么是贝塞尔曲线

贝塞尔曲线是应用于二维图形应用程序的数学曲线。曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。原理：由 P0 至 P1 的连续点 Q0，描述一条线段。由 P1 至 P2 的连续点 Q1，描述一条线段。由 Q0 至 Q1 的连续点 B(t)，描述一条二次贝塞尔曲线。

var canvas = document.getElementById('myCanvas') var context =canvas.getContext('2d') context.beginPath() context.moveTo(100,150), //创建二次贝塞尔曲线。 //四个参数，第一个贝塞尔控制点的 x 坐标；第二个贝塞尔控制点的 y 坐标；第三个结束点的 x 坐标；第四个结束点的 y 坐标。 context.quadraticCurveTo(240,50,300,150), context.stroke()

Canvas - 渐变渐变分为两种线性渐变和径向渐变线性渐变

var canvas = document.getElementById('myCanvas') var context =canvas.getContext('2d') // 创建渐变 var clg=context.createLinearGradient(0,0,200,0); clg.addColorStop(0,"rgb(125, 67, 233)"); clg.addColorStop(0.5,"rgb(215, 230, 9)"); clg.addColorStop(1,"white"); // 填充线性渐变 context.fillStyle=clg; //设置或返回用于笔触的颜色、渐变或模式 canvas.strokeStyle=clg; context.fillRect(10,10,150,80); context.stroke()

径向渐变

var canvas = document.getElementById('myCanvas') var context =canvas.getContext('2d') // 创建径向渐变 var clg=context.createRadialGradient(200,200,150,200,200,40); clg.addColorStop(0,"rgb(125, 67, 233)"); clg.addColorStop(0.5,"rgb(215, 230, 9)"); clg.addColorStop(1,"white"); // 填充渐变 context.fillStyle=clg; context.fillRect(10,10,400,400);

下面是使用canvas做的一个时钟

静态图片是这个样子

Processed: 0.009, SQL: 9