H5（2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: gray;
        }
        .test{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin:auto;
            background-color: white;
        }
    </style>
    <script>
        window.onload=function(){
            var canvas=document.getElementsByTagName("canvas")[0];
            if(canvas.getContext){
                var ctx=canvas.getContext("2d");
            }
            canvas.onmousedown=function(ev){
                ev=ev||window.event;
                if(canvas.setCapture){
                    canvas.setCapture();
                }
                ctx.beginPath();
                ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
                document.onmousemove=function(ev){
                    ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
                    ctx.stroke();
                }
                document.onmouseup=function(){
                    document.onmousemove=document.onmouseup=null;
                    if(document.releaseCapture){
                        document.releaseCapture();
                    }
                }
                return false;
            }
        }
    </script>
</head>
<body>
    <canvas class="test" width="500px" height="500px"></canvas>
</body>
</html>

canvas绘制曲线

角度与弧度的JS表达式：radius=(Math.PI/180)*degrees

arc(x,y,radius,startAngle,endAngle,anticlockwise)

画一个以(x,y)为圆心，半径为radius的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

anticlockwise可取两个值：

true：逆时针

false：顺时针

startAngle以及endAngle参数用弧度定义了开始和结束的弧度，这些都是以x轴为基准的。

arcTo(x1,y1,x2,y2,radius)

根据给定的控制点（需要三个点，即moveTo()来控制起始点）和半径画一段圆弧。

画出的弧肯定经过起始点（即moveTo()指定的点），但不一定经过(x1,y1)和(x2,y2)，坐标点只是控制一个方向。

quadraticCurveTo(cp1x,cp1y,x,y)

绘制二次贝塞尔曲线，(cp1x,cp1y)为一个控制点，(x,y)为结束点，起始点为moveTo()时指定的点。

画出弧的肯定经过起始点和结束点

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

绘制三次贝塞尔曲线，(cp1x,cp1y)为控制点一，(cp2x,cp2y)为控制点二，(x,y)为结束点，起始点为moveTo()时指定的点。

画出弧的肯定经过起始点和结束点

canvas变换

translate(x,y)

该方法用来移动canvas的原点到一个不同的位置。

该方法接受两个参数：x为水平偏移量，y为垂直偏移量。

在canvas中translate()方法是累加之后的结果。

rotate(angle)

该方法用来旋转canvas坐标轴。该方法只接受一个参数：旋转角度（angle），它是顺时针方向的，以弧度为单位的值。旋转的中心始终是canvas的原点，如果要改变它，需要调用translate()方法。

在canvas中rotate()方法是累加之后的结果。

scale(x,y)

该方法接受两个参数：x，y分别是横轴和纵轴的缩放因子，其值必须为正值。

值比1.0小表示缩小，比1.0大表示放大。

缩放一般用来增减图形在canvas中的像素数目，对形状、位图进行缩小或放大。

在canvas中scale()方法是累乘的。

变换实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: gray;
        }
        .test{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin:auto;
            background-color: white;
        }
    </style>
    <script>
        window.onload=function(){
            var flag=0;
            var scale=0;
            var i=1;
            var canvas=document.getElementsByTagName("canvas")[0];
            if(canvas.getContext){
                var ctx=canvas.getContext("2d");
            }
            ctx.save();
            ctx.translate(250,250);
            ctx.beginPath();
            ctx.fillRect(-75,-75,150,150);
            ctx.restore();
            setInterval(function(){
                flag++;
                ctx.clearRect(0,0,500,500);
                ctx.save();
                ctx.translate(250,250);
                ctx.rotate(flag*Math.PI/180);
                if(scale==100)
                    i=-1;
                else if(scale==0)
                    i=1;
                scale=scale+i;
                ctx.scale(scale/100,scale/100);
                ctx.beginPath();
                ctx.fillRect(-75,-75,150,150);
                ctx.restore();
            })
        }
    </script>
</head>
<body>
    <canvas class="test" width="500px" height="500px"></canvas>
</body>
</html>

canvas实例-时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: gray;
        }
        .test{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin:auto;
            background-color: white;
        }
    </style>
    <script>
        window.onload=function(){
            var canvas=document.getElementsByTagName("canvas")[0];
            if(canvas.getContext){
                var ctx=canvas.getContext("2d");
                setInterval(function(){
                    ctx.clearRect(0,0,canvas.width,canvas.height);
                    move();
                },1000)
            }
            function move(){
                ctx.save();
                ctx.lineWidth=8;
                ctx.lineCap="round";
                ctx.strokeStyle="black";
                ctx.translate(250,250);
                ctx.rotate(-90*Math.PI/180);
                //外盘
                ctx.save();
                ctx.strokeStyle="gray";
                ctx.lineWidth=14;
                ctx.beginPath();
                ctx.arc(0,0,140,0,360*Math.PI/180);
                ctx.stroke();
                ctx.restore();
                //时针刻度
                ctx.save();
                ctx.beginPath();
                for(var i=0;i<12;i++){
                    ctx.moveTo(100,0);
                    ctx.lineTo(120,0);
                    ctx.stroke();
                    ctx.rotate(30*Math.PI/180);
                }
                ctx.restore();
                //分针刻度
                ctx.save();
                ctx.lineWidth=4;
                ctx.beginPath();
                for(var i=0;i<60;i++){
                    if(i%5==0){
                        ctx.rotate(6*Math.PI/180);
                        continue;
                    }
                    ctx.moveTo(117,0);
                    ctx.lineTo(120,0);
                    ctx.stroke();
                    ctx.rotate(6*Math.PI/180);
                }
                ctx.restore();
                //内部
                var date=new Date();
                var s=date.getSeconds();
                var m=date.getMinutes()+s/60;
                var h=date.getHours()+m/60;
                if(h>12) h=h-12;
                //时针
                ctx.save();
                ctx.lineWidth=14;
                ctx.rotate(h*30*Math.PI/180);
                ctx.beginPath();
                ctx.moveTo(-20,0);
                ctx.lineTo(80,0);
                ctx.stroke();
                ctx.restore();
                //分针
                ctx.save();
                ctx.lineWidth=10;
                ctx.rotate(m*6*Math.PI/180);
                ctx.beginPath();
                ctx.moveTo(-28,0);
                ctx.lineTo(112,0);
                ctx.stroke();
                ctx.restore();
                //秒针
                ctx.save();
                ctx.lineWidth=6;
                ctx.strokeStyle="red";
                ctx.fillStyle="red";
                ctx.rotate(s*6*Math.PI/180);
                ctx.beginPath();
                ctx.moveTo(-30,0);
                ctx.lineTo(83,0);
                ctx.stroke();
                //表座
                ctx.beginPath();
                ctx.arc(0,0,10,0,360*Math.PI/180);
                ctx.fill();
                ctx.restore();
                ctx.restore();
            }
        }
    </script>
</head>
<body>
    <canvas class="test" width="500px" height="500px"></canvas>
</body>
</html>

canvas使用图片

在canvas操作图片时，必须要等待图片加载完才能操作

drawImage(image,x,y,width,height)

其中image是image或者canvas对象，x和y是其在目标canvas里的起始坐标

这个方法多了两个参数：width和height，这两个参数用来控制当向canvas画入时应该缩放的大小

createPattern(image,repetition)

该方法用来设置canvas背景

repetition可选值：

"repeat"
"repeat-x"
"repeat-y"
"no-repeat"

一般情况下，我们会将createPattern()返回的对象作为fillStyle()的值

线性渐变

createLinearGradient(x1,y1,x2,y2)

渐变起点(x1,y1)，终点(x2,y2)

gradient.addColorStop(position,color)

gradient：createLinearGradient的返回值

addColorStop方法接受两个参数：

position参数必须是一个0.0与1.0之间的数值，表示渐变中颜色所在的相对位置。例如，0.5表示颜色出现在正中间。

color参数必须是一个有效的CSS颜色值

径向渐变

createRadialGradient(x1,y1,r1,x2,y2,r2)

前三个参数定义另一个以(x1,y1)为原点，半径为r1的圆

后三个参数定义另一个以(x2,y2)为原点，半径为r2的圆

canvas绘制文本

canvas中提供了两种方法来渲染文本

fillText(text,x,y)

在指定的(x,y)位置填充指定的文本

strokeText(text,x,y)

在指定的(x,y)位置绘制文本边框

文本样式

font=value

当前用来绘制文本的样式，这个字符串使用和CSS font属性相同的语法

默认字体是10px sans-serif

font属性在指定时，必须要有大小和字体。

textAlign=value

文本对齐选项，可选值有："left"、"right"、"center"

"left"：左对齐
"right"：右对齐
"center"：居中对齐

这里的textAlign="center"比较特殊，textAlign的值为center时，文本的居中是基于你在fillText时所给的x值，也就是文本一半在x的左边，一半在x的右边

textBaseline=value

描述文本时，当前文本基线的属性

"top"：文本基线在文本块的顶部
"middle"：文本基线在文本块的中间
"bottom"：文本基线在文本块的底部

measureText()

该方法需要传入一个参数，返回一个TextMetrics对象，包含关于文本尺寸的信息（例如文本的宽度）

canvas文本的垂直水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: gray;
        }
        .test{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin:auto;
            background-color: white;
        }
    </style>
    <script>
        window.onload=function(){
            var canvas=document.getElementsByTagName("canvas")[0];
            if(canvas.getContext){
                var ctx=canvas.getContext("2d");
            }
            ctx.font="60px gg";
            ctx.textBaseline="middle";
            var w=ctx.measureText("星辰").width;
            ctx.fillText("星辰",(canvas.width-w)/2,(canvas.height-60)/2);
        }
    </script>
</head>
<body>
    <canvas class="test" width="500px" height="500px"></canvas>
</body>
</html>