Canvas图形绘制

矩形绘制

rect(x,y,w,h) 没有独立路径

strokeRect(x,y,w,h) 有独立路径，不影响别的绘制

fillRect(x,y,w,h) 有独立路径，不影响别的绘制

clearRect(x,y,w,h) 擦除矩形区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*绘制矩形路径 不是独立路径*/
    ctx.rect(100,100,100,100);
    ctx.fillStyle = 'green';
    ctx.stroke();
    ctx.fill();

    /*绘制矩形  有自己的独立路径*/
    ctx.fillStyle = 'red';
    ctx.strokeRect(200,200,100,100);
    
    ctx.fillStyle = 'skyblue';
    ctx.fillRect(300,300,100,100);
    /*清除矩形的内容*/
    // ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

</script>
</body>
</html>

createLinearGradient()方法

绘制渐变颜色矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
/*        .linearGradient{
            width: 400px;
            height: 100px;
            background-image: linear-gradient(to right,pink,blue);
        }*/
    </style>
</head>
<body>
<div class="linearGradient"></div>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*fillStyle 'pink' '#000' 'rgb()' 'rgba()' */
    /*也可以使用一个渐变的方案了填充矩形*/
    /*创建一个渐变的方案*/
    /*渐变是由长度的*/
    /*x0y0 起始点 x1y1 结束点  确定长度和方向*/
    var linearGradient = ctx.createLinearGradient(100,100,500,400);
    linearGradient.addColorStop(0,'pink');
    //linearGradient.addColorStop(0.5,'red');
    linearGradient.addColorStop(1,'blue');

    ctx.fillStyle = linearGradient;

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

    /*pink---->blue*/
    /*回想线性渐变---->要素 方向  起始颜色 结束颜色 */
    /*通过两个点的坐标可以控制 渐变方向*/
</script>
</body>
</html>

圆弧绘制

弧度概念

这就和数学中的概念知识是一样的。

弧度：是一种长度的描述单位

一个弧度怎么去描述一个圆有多少个弧度 2 * π

一弧度有多长一个弧度一个半径的长度

名词：

角度：一个圆是360度

半径：已一个点为中心多长为放射半径

周长：2 * π * r

最终的结论：一个角度等于多少弧度 π/180

用三角函数体验曲线的绘制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.体验曲线的绘制*/
    /*2.线是由点构成的*/
    /*3.曲线可以由数学公式得来*/

    /*公式：y = x/2 */
    /*公式：y = (x + 2) ^2  */
    /*公式：y = sin(x) */

    for(var i = 1 ; i < 600 ; i ++){
        var x = i;
        //var y = x/2;
        //var y = Math.pow(x/10-30,2);
        var y = 50*Math.sin(x/10) + 100;
        ctx.lineTo(x,y);
    }
    ctx.stroke();



</script>
</body>
</html>

arc() 方法画圆弧

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

参数：

x 圆心横坐标

y 圆心纵坐标

r 半径

startAngle 开始角度

endAngle 结束角度

anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*绘制圆弧*/
    /*确定圆心  坐标 x y*/
    /*确定圆半径  r */
    /*确定起始绘制的位置和结束绘制的位置  确定弧的长度和位置  startAngle endAngle   弧度*/
    /*取得绘制的方向 direction 默认是顺时针 false 逆时针 true */

    /*在中心位置画一个半径150px的圆弧左下角*/
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    ctx.arc(w/2,h/2,150,Math.PI/2,Math.PI,true);
    ctx.stroke();


</script>
</body>
</html>

圆实例练习

绘制六种颜色等分的圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    var w = ctx.canvas.width;
    var h = ctx.canvas.height;

    /*分成几等分*/
    var num = 360;
    /*一份多少弧度*/
    var angle = Math.PI * 2 / num;

    /*原点坐标*/
    var x0 = w / 2;
    var y0 = h / 2;

    /*获取随机颜色*/
    var getRandomColor = function () {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    /*上一次绘制的结束弧度等于当前次的起始弧度*/
    //var startAngle = 0;
    for (var i = 0; i < num; i++) {
        var startAngle = i * angle;
        var endAngle = (i + 1) * angle;
        ctx.beginPath();
        ctx.moveTo(x0, y0);
        ctx.arc(x0, y0, 150, startAngle, endAngle);
        /*随机颜色*/
        ctx.fillStyle = getRandomColor();
        ctx.fill();
    }


</script>
</body>
</html>