canvas

canvas是什么

canvas是一个可以使用脚本(通常为JavaScript来绘制图形的 HTML元素 ,就是HTML的一种画布

<canvas> 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,随后被各个浏览器实现。如今,所有主流的浏览器都支持它。

<canvas>标签

Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px)。但是,可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个JavaScript上下文对象,它能动态创建图像 .

<convas>只有两个属性

  • width:画布宽度 (可选)
  • height:画布的高度 (可选)
<canvas width="150" height="150"></canvas>

我们可以提供对canvas内容的文字描述或者是提供动态生成内容相对应的静态图片(文字看不出来)

<canvas id="stockGraph" width="150" height="150">
    current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
    <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

基本用法

``标签只有两个属性 – widthheight,所以在低版本的浏览器是不支持的,要在浏览器中写上 :

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

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

<canvas width='300px' height='150px'></canvas>
1
浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。

**注释:**Internet Explorer 8 以及更早的版本不支持 元素。

绘制形状

画布坐标

img

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

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
12
绘制矩形

fillRect(x, y, width, height)

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

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

img

<!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>

img

<!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
    • 矩形的高度。正值在下,负值在上。

img

<!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>
123456789101112131415161718192021222324

clearRect(x, y, width, height)

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

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

img

<!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>


img

<!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>

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

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

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

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

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

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

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

img

<!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

  • 设置图形的填充颜色

img

<!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

  • 社会图形轮廓的颜色

img

<!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

  • 设置透明度

img

<!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)

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

wshF1I.png

<!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

img

<!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>
```## canvas是什么

 `canvas`是一个可以使用脚本(通常为JavaScript来绘制图形的 HTML元素 ,就是HTML的一种画布

 `<canvas>` 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,随后被各个浏览器实现。如今,所有主流的浏览器都支持它。 

### `<canvas>`标签

 Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px)。但是,可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个JavaScript上下文对象,它能动态创建图像 .

`<convas>`只有两个属性

- `width`:画布宽度 (可选)
- `height`:画布的高度 (可选)

```html
<canvas width="150" height="150"></canvas>

我们可以提供对canvas内容的文字描述或者是提供动态生成内容相对应的静态图片(文字看不出来)

<canvas id="stockGraph" width="150" height="150">
    current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
    <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

基本用法

``标签只有两个属性 – widthheight,所以在低版本的浏览器是不支持的,要在浏览器中写上 :

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

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

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

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。

**注释:**Internet Explorer 8 以及更早的版本不支持 元素。

绘制形状

画布坐标

img

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

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
12
绘制矩形

fillRect(x, y, width, height)

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

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

img

<!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>
123456789101112131415161718192021

img

<!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
    • 矩形的高度。正值在下,负值在上。

img

<!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>
123456789101112131415161718192021222324

clearRect(x, y, width, height)

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

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

img

<!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>
123456789101112131415161718192021222324

img

<!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>

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

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

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

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

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

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

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

img

<!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

  • 设置图形的填充颜色

img

<!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>
12345678910111213141516171819202122

strokeStyle = color

  • 社会图形轮廓的颜色

img

<!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>
123456789101112131415161718192021222324

透明度 Transparency

globalAlpha = transparencyValue

  • 设置透明度

img

<!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)

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

wshF1I.png

<!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

img

<!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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值