html5之canvas绘制图像

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做的一个时钟

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function clock() {
    ctx.save()
        ctx.translate(300,300)
        ctx.lineCap = 'round'
        ctx.strokeStyle = 'rgb(166, 167, 162)'
        ctx.lineWidth = 8
        ctx.scale(0.5,0.5)
        // 画外面的圆
        ctx.save();
        ctx.beginPath();
       ctx.strokeStyle = '#000000';
        ctx.arc(0,0,150,0,2*Math.PI);
        ctx.stroke();
        ctx.restore();

        // 画里面的刻度
        ctx.save()
            ctx.beginPath();
            for (var i=0; i < 12; i++) {
                ctx.moveTo(0,-125);
                ctx.lineTo(0,-140);
                ctx.stroke()
                ctx.rotate(30*Math.PI/180)
            }
        ctx.restore()

        // 分针刻度
        ctx.save()
            ctx.lineWidth = 3
            for (var i = 0; i < 60; i++) {
                if (i % 5 != 0){
                    ctx.beginPath()
                    ctx.moveTo(0,-135);
                    ctx.lineTo(0,-140);
                    ctx.stroke()
                }
                ctx.rotate(6*Math.PI/180)
            }
        ctx.restore()
        // 当前时间
        var date = new Date()
        var s = date.getSeconds()
        var min = date.getMinutes() + s/60
        var h = date.getHours() + min/60

        // 时针
        ctx.save()
            ctx.rotate(30*h*Math.PI/180)
            ctx.lineWidth = 14
            ctx.beginPath()
            ctx.moveTo(0,-80)
            ctx.lineTo(0,20)
            ctx.stroke()
        ctx.restore()

        // 分针
        ctx.save()
            ctx.lineWidth = 10
            ctx.rotate(6*min*Math.PI/180)
            ctx.beginPath()
            ctx.rotate(-30*Math.PI/180)
            ctx.moveTo(0,-120)
            ctx.lineTo(0,30)
            ctx.stroke()
        ctx.restore()

        //秒针
        ctx.save()
            ctx.lineWidth = 6
            ctx.strokeStyle = 'rgb(166, 167, 162)'
            ctx.fillStyle = 'rgb(166, 167, 162)'
            ctx.rotate(6*s*Math.PI/180)

            ctx.beginPath()
            ctx.arc(0,0,10,0,2*Math.PI)
            ctx.fill()

            ctx.beginPath()
            ctx.moveTo(0,-125)
            ctx.lineTo(0,30)
            ctx.stroke()

            ctx.beginPath()
            ctx.arc(0,-135,10,0,2*Math.PI)
            ctx.stroke()
        ctx.restore()
    ctx.restore()
}
setInterval(function () {
    ctx.clearRect(0,0,canvas.width,canvas.height)
    move()
},1000)

静态图片是这个样子