canvas

关键字：canvas 绘制 线 矩形 文字 圆形 曲线 图片 画布 变形 阴影

---

简介

IE8以下不支持
HTML5新标签 使用JS API
canvas不适用CSS设置样式，使用自身的width和height属性设置

作用

• 绘制线
• 绘制三角形
• 绘制矩形
• 绘制文字
• 绘制圆形
• 绘制图片
• 绘制视频
• 绘制图片阴影

<canvas id="canvas" width="500" height="500">
    您的浏览器不支持canvas，请升级至最新版
</canvas>

常用方法

获取元素

大多数时候都在操作ctx对象

var canvas=document.getElementById("canvas");

获取上下文对象（画笔）

var ctx=canvas.getContext("2d");

暂时不涉及3d

绘制线

• 1、开始绘制
• 2、绘制起点
• 3、绘制后续的点
• 4、绘制结束
  • closePath()也叫关闭路径，会把终点和起点连接起来进行绘制
  • 当需要终点和起点连接，才使用closePath()
• 5、画（填）
  • 设置画线颜色
  • 设置画线的宽度
  • 画线
  • 设置填充颜色
  • 填充
  • 绘制的线和填充的内容会发生覆盖的情况，没有优先级，由代码顺序决定（后面设置的会覆盖前面设置的）

//1、开始绘制
ctx.beginPath();
//2、绘制起点
ctx.moveTo(250,250);
//3、绘制后续的点
ctx.lineTo(500,0);
ctx.lineTo(450,450);
//4、绘制结束
//closePath()也叫关闭路径，会把终点和起点连接起来进行绘制
//当需要终点和起点连接，才使用closePath()
ctx.closePath();
//5、画（填）
//设置画线颜色
ctx.strokeStyle="red";
//设置画线的宽度
ctx.lineWidth=5;
//画线
ctx.stroke();
//设置填充颜色
ctx.fillStyle="blue";
//填充
ctx.fill();
//绘制的线和填充的内容会发生覆盖的情况，没有优先级，由代码顺序决定（后面设置的会覆盖前面设置的）

绘制矩形

按照矩形画线ctx.strokeRect(x,y,w,h);
按照矩形填充ctx.fillRect(x,y,w,h);

//按照矩形画线
ctx.strokeRect(0,0,100,100);
//按照矩形填充
ctx.fillRect(0,100,100,100);

绘制文字

• 参数4:最大宽度，可写可不写

描边文字ctx.strokeText(text,x,y,maxwidth?);
填充文字ctx.fillText(text,x,y,maxwidth?);

ctx.font="50px 黑体"；
ctx.strokeText("hello world",100,100);
ctx.fillText("hello world",100,100);

绘制圆形

ctx.arc(x,y,r,startAngle,endAngle,direction)

• 参数1:圆心的x
• 参数2:圆心的y
• 参数3:圆的半径
• 参数4:起点的位置，根据右侧和设置的弧度制找到起点
• 参数5:终点的位置，根据右侧和设置的弧度制找到终点
• 参数6:绘制的方向，true表示逆时针，false表示顺时针

ctx.arc(250, 250, 200, Math.PI, Math.PI / 2, true);
ctx.stroke();

绘制曲线

• 使用moveTo设置起点
• 使用quadraticCurveTo()放置基准点和终点

二次贝塞尔曲线

• 参数1:基准点的x
• 参数2:基准点的y
• 参数3:终点的x
• 参数4:终点的y

ctx.moveTo(0, 0)
ctx.quadraticCurveTo(250, 500, 500, 0);
ctx.stroke();

ctx.moveTo(0, 0);
ctx.quadraticCurveTo(500, 250, 0, 500);
ctx.stroke();

ctx.moveTo(0, 500);
ctx.quadraticCurveTo(250, 0, 500, 500);
ctx.stroke();

ctx.moveTo(500,0);
ctx.quadraticCurveTo(0, 250, 500, 500);
ctx.stroke();

三次贝塞尔曲线的特点是有两个基准点

• 参数1:基准点1的x
• 参数2:基准点1的y
• 参数3:基准点2的x
• 参数4:基准点2的y
• 参数5:终点的x
• 参数6:终点的y

ctx.moveTo(0, 0);
ctx.bezierCurveTo(500, 0, 0, 500, 500, 500);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(0, 500, 500, 0, 500, 500);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(500, 0);
ctx.bezierCurveTo(0, 0, 500, 500, 0, 500);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(500, 0);
ctx.bezierCurveTo(500, 500, 0, 0, 0, 500);
ctx.stroke();

绘制图片

• 如果想把图像画到canvas中，需要先创建image对象

var img = new Image();
img.src = './imgs/img.png';
img.onload = function () {
    // 必须等图片加载完成之后，才可以进行绘制
    ctx.drawImage(img, 100, 100);
    // ctx.drawImage(img, 100, 100, 200, 200);
    // ctx.drawImage(img, 100, 100, 260, 260, 100, 96, 260, 260);
    
    // 清除画布
    ctx.clearRect(250, 250, 200, 200);
    // 四个参数： x, y, w, h
    // 用户清除画布中已有的内容
};

变形

注意：改变不了坐标系
不会影响已经绘制的内容

• 位移ctx.translate(x,y);
• 缩放ctx.scale(scaleX,scaleY)
• 旋转、弧度ctx.rotate();

代码练习

ctx.translate(100, 100);
ctx.scale(2, 2);
ctx.rotate(Math.PI / 8);

ctx.fillRect(100, 100, 300, 100);

ctx.rotate(Math.PI / 2);
ctx.translate(200, 100);

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 300, 100);

代码示例

// 绘制表盘
ctx.translate(250, 250);
for (var i = 0; i < 12; i++) {
    ctx.rotate(Math.PI / 6);
    ctx.beginPath();
    ctx.moveTo(0, -200);
    ctx.lineTo(0, -150);
    ctx.closePath();
    ctx.lineWidth = 10;
    ctx.stroke();
//因为表盘上所有的刻度都是围绕中心展开的，所以，先把坐标系原点 平移 到canvas中心的位置，然后在使用 负的y值 进行绘制，每次绘制前，进行30度的旋转即可，持续12次。 第一个绘制的并非是12刻度，而是刻度1
}

判断是否点中

• var res=ctx.isPointInPath(x,y);
  • 判断是否点了某个区域
  • 注意点：如果进行了描边，点击内部也会触发
• var res=ctx.isPointInStroke(x,y);
  • 判断是否点中了边框

常用属性

颜色、线

• 设置颜色ctx.strokeStyle = 'red';
• 设置线的宽度ctx.lineWidth = 50;
• 设置线的头部和尾部进行圆角处理ctx.lineCap = 'round';
• 设置线的交互处进行圆角处理ctx.lineJoin = 'round';

ctx.strokeStyle = 'red';
ctx.lineWidth = 50;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.stroke();

文字

• 设置文字字体ctx.font = '50px 黑体';

注意：单独设置字体大小不起作用，需要同时设置字体

• 设置水平对齐方式ctx.textAlign = 'left';
  • textAlign的参数start|left/center/end|right
• 设置垂直对齐方式ctx.textBaseline = 'middle';
  • textBaseline的参数top/middle/bottom

ctx.font = '50px 黑体';
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.fillText('l j k m n p q', 100, 100);
ctx.strokeRect(100, 100, 300, 100);

阴影

• 设置阴影颜色ctx.shadowColor = 'blue';
• 设置阴影X轴偏移量ctx.shadowOffsetX = 10;
• 设置阴影Y轴偏移量ctx.shadowOffsetY = 10;
• 设置阴影模糊程度ctx.shadowBlur = 10;

代码示例

ctx.shadowColor = 'blue';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
ctx.fillRect(250, 250, 200, 200);

动画

动画的原理：擦出-绘制-擦出-绘制-擦出-绘制-擦出-绘制

• 使用setInterval();切换选项卡的时候
• 使用setTimeout();实现setInterval();
• requestAnimationFrame();帧动画

学习应用——躁动的小球

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>躁动的小球</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="300" height="300">
            <p>您的浏览器不支持canvas，请<a href="#">点击</a>下载最新版浏览器</p>
        </canvas>
    </body>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        canvas.width=window.innerWidth;
        canvas.height=window.innerHeight;
        
        var canvasWidth=canvas.width;
        var canvasHeight=canvas.height;
        
        
        function random(min,max){
            return parseInt(Math.random()*(max-min+1)+min);
        }
        function randomColor(){
            var r=random(0,255);
            var g=random(0,255);
            var b=random(0,255);
            var a=Math.random(0,1)+0.3;
            return "rgba("+r+","+g+","+b+","+a+")";
        }
        
        var balls=[];
        for (var i=0;i<500;i++) {
            var ball={};
            ball.r=random(10,30);
            ball.x=random(ball.r,canvasWidth-ball.r);
            ball.y=random(ball.r,canvasHeight-ball.r);
            ball.color=randomColor();
            ball.speedX=random(1,5);
            ball.speedY=random(1,5);
            
            balls.push(ball);
        }
        
        setInterval(function(){
            ctx.clearRect(0,0,canvasWidth,canvasHeight);
            
            for (var i=0;i<balls.length;i++) {
                var ball=balls[i];
                
                ball.x+=ball.speedX;
                ball.y+=ball.speedY;
                
                if (ball.x>=canvasWidth-ball.r||ball.x<=ball.r) {
                    ball.speedX*=-1;
                }
                if (ball.y>=canvasHeight-ball.r||ball.y<=ball.r) {
                    ball.speedY*=-1;
                }
                
                ctx.beginPath();
                ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2,false);
                ctx.closePath();
                ctx.fillStyle=ball.color;
                ctx.fill();
                
            }
            
        },20)
    </script>
</html>