HTML 5 Canvas – 源码巴士

基本用法

<canvas>标签只有两个属性 – width 和 height,所以在低版本的浏览器是不支持的,要在浏览器中写上 :

<canvas id="tutorial" width="150" height="150">浏览器版本不支持</canvas>

<canvas>在没有设置宽高的时候,默认初始化为 :

<canvas width='300px' height='150px'></canvas>

浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持及其属性和方法。
**注释：**Internet Explorer 8 以及更早的版本不支持元素。

绘制形状

画布坐标

<canvas>元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

绘制矩形

fillRect(x, y, width, height)

fillRect()方法绘制一个填充的矩形

x
- 矩形起始点的 x 轴坐标
y
- 矩形起始点的 y 轴坐标
width
- 矩形的宽度
height
- 矩形的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");

                ctx.fillStyle = "rgb(200,0,0)";
                ctx.fillRect (100, 50, 100, 100);
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");

                ctx.fillStyle = "rgb(200,0,0)";
                ctx.fillRect (0, 0, 100, 100);
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

strokeRect(x, y, width, height)

strokeRect()方法绘制一个描边矩形，其起点为(x, y) ，其大小由宽度和高度指定

x
- 矩形起点的 x 轴坐标。
y
- 矩形起点的 y 轴坐标。
width
- 矩形的宽度。正值在右侧，负值在左侧。
height
- 矩形的高度。正值在下，负值在上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
                //颜色
                ctx.fillStyle = "rgb(200,0,0)";
                //矩形
                ctx.fillRect (0, 0, 180, 180);
                //描边
                ctx.strokeRect(50, 50, 45, 45);
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

clearRect(x, y, width, height)

clearRect()方法清除指定矩形区域，让清除部分完全透明。

x
- 矩形起始点的 x 轴坐标
y
- 矩形起始点的 y 轴坐标
width
- 矩形的宽度
height
- 矩形的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
                //颜色
                ctx.fillStyle = "rgb(200,0,0)";
                //矩形
                ctx.fillRect (0, 0, 100, 100);
                //透明
                ctx.clearRect(50, 50, 100, 100);
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
                //颜色
                ctx.fillStyle = "rgb(200,0,0)";
                //矩形
                ctx.fillRect (0, 0, 180, 180);
                //透明
                ctx.clearRect(50, 50, 45, 45);
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

绘制路径

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形

生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

第二步就是调用函数指定绘制路径。

第三，就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合

方法	描述
fill()	填充当前绘图（路径)
stroke()	绘制已定义的路径
beginPath()	起始—条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo(	创建三次方贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆)
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，则返回true，否则返回false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');

                ctx.beginPath();
                ctx.moveTo(75, 50);
                ctx.lineTo(100, 75);
                ctx.lineTo(100, 25);
                ctx.fill();
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

圆弧

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

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

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式: 弧度=(Math.PI/180)*角度

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext){
                var ctx = canvas.getContext('2d');

                for(var i = 0; i < 4; i++){
                    for(var j = 0; j < 3; j++){
                        ctx.beginPath();
                        var x = 25 + j * 50; // x 坐标值
                        var y = 25 + i * 50; // y 坐标值
                        var radius = 20; // 圆弧半径
                        var startAngle = 0; // 开始点
                        var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
                        var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针

                        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

                        if (i>1){
                            ctx.fill();
                        } else {
                            ctx.stroke();
                        }
                    }
                }
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

添加样式和颜色

色彩Colors

fillStyle = color

设置图形的填充颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');
            for (var i=0;i<6;i++){
                for (var j=0;j<6;j++){
                    ctx.fillStyle = 'rgb(' + Math.floor(255-45*i) + ',' +
                        Math.floor(255-45*j) + ',0)';
                    ctx.fillRect(j*25,i*25,25,25);
                }
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

strokeStyle = color

社会图形轮廓的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');
            for (var i=0;i<6;i++){
                for (var j=0;j<6;j++){
                    ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
                        Math.floor(255-42.5*j) + ')';
                    ctx.beginPath();
                    ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
                    ctx.stroke();
                }
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

透明度 Transparency

globalAlpha = transparencyValue

设置透明度

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(20,20,75,50);

    //Turn transparency on
    ctx.globalAlpha=0.2;
    ctx.fillStyle="green";
    ctx.fillRect(50,50,75,50);
    ctx.fillStyle="blue";
    ctx.fillRect(80,80,75,50);
</script>

</body>
</html>

渐变 Gradients

createLinearGradient(x1,y1,x2,y2)

用线性或者径向的渐变来填充或描边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');

            // 创建渐变
            var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
            radgrad.addColorStop(0, '#A7D30C');
            radgrad.addColorStop(0.9, '#019F62');
            radgrad.addColorStop(1, 'rgba(1,159,98,0)');

            var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
            radgrad2.addColorStop(0, '#FF5F98');
            radgrad2.addColorStop(0.75, '#FF0188');
            radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

            var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
            radgrad3.addColorStop(0, '#00C9FF');
            radgrad3.addColorStop(0.8, '#00B5E2');
            radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

            var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
            radgrad4.addColorStop(0, '#F4F201');
            radgrad4.addColorStop(0.8, '#E4C700');
            radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

            // 画图形
            ctx.fillStyle = radgrad4;
            ctx.fillRect(0,0,150,150);
            ctx.fillStyle = radgrad3;
            ctx.fillRect(0,0,150,150);
            ctx.fillStyle = radgrad2;
            ctx.fillRect(0,0,150,150);
            ctx.fillStyle = radgrad;
            ctx.fillRect(0,0,150,150);
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>

案例

太阳系 – 来源于MDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>太阳系动画</title>
    <script>
        var sun = new Image();
        var moon = new Image();
        var earth = new Image();
        function init(){
            sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
            moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
            earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
            window.requestAnimationFrame(draw);
        }

        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');

            ctx.globalCompositeOperation = 'destination-over';
            ctx.clearRect(0,0,300,300); // clear canvas

            ctx.fillStyle = 'rgba(0,0,0,0.4)';
            ctx.strokeStyle = 'rgba(0,153,255,0.4)';
            ctx.save();
            ctx.translate(150,150);

            // Earth
            var time = new Date();
            ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
            ctx.translate(105,0);
            ctx.fillRect(0,-12,50,24); // Shadow
            ctx.drawImage(earth,-12,-12);

            // Moon
            ctx.save();
            ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
            ctx.translate(0,28.5);
            ctx.drawImage(moon,-3.5,-3.5);
            ctx.restore();

            ctx.restore();

            ctx.beginPath();
            ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
            ctx.stroke();

            ctx.drawImage(sun,0,0,300,300);

            window.requestAnimationFrame(draw);
        }

        init();
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="1300" height="1300"></canvas>
</body>
</html>

原文链接：https://blog.csdn.net/DeathDomain/article/details/108594850