canvas入门笔记

1.canvas–画布

在网页中代表画布元素，画布元素会在网页中创建矩形区域，在矩形区域中可以使用js绘制图案

1.创建canvas标签，设置画布大小，背景色，获取canvas元素
2.获取到canvas元素之后，需要获取到context对象

注意：所有绘画的操作都是在canvas的context对象进行的

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
</script>

2.canvas–绘制矩形

context.fillRect(x,y,宽，高);–实心矩形
context.strokeRect(x,y,宽，高) –空心矩形

例如：
在画布上绘制一个左上角坐标为 (40, 20)，且宽高为 80 像素的正方形轮廓
在画布上绘制一个左上角坐标为 (20, 120)，且宽度为 120 像素，高度为 60 像素的填充矩形

<canvas id="mycanvas" with="500" height="500" style="background-color:#ddd"></canvas>
<script>
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");

    ctx.fillRect(40, 20, 80, 80);
    ctx.strokeRect(20, 120, 120, 60);
</script>

3.canvas–绘制线条

<canvas id="mycanvas" width="500" height="500" style="background-color: #ddd"></canvas>
<script>
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");

    //开始设置路径
    ctx.beginPath();
    //设置路径原点
    ctx.moveTo(50, 50);
    //设置路径到达的点
    ctx.lineTo(50, 200);
    //输出路径轮廓
    ctx.stroke();

    //开始新的路径绘制三角形
    ctx.beginPath();
    ctx.moveTo(100, 50);
    ctx.lineTo(100, 200);
    ctx.lineTo(250, 200);
    //context.lineTo(100,50);
    //可以自动闭合路径
    ctx.closePath();
    ctx.stroke();

    ctx.fill();
</script>

4.canvas–绘制圆弧

<canvas id="mycanvas" width="500" height="500" style="background-color: #ddd"></canvas>
<script>
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");

    //context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
    //圆心坐标-(x,y),半径-radius, 开始角度-startAngle, 结束角度-endAngle,
    //可选参数-anti-clockwise = false（顺时针绘图）

    //注意：canvas中圆弧的开始角度和结束角度都是弧度表示，而不是角度--360°=2π（弧度）
    /*
    公式：
    var degree = 1; // 表示 1°
    var radians = degree * (Math.PI / 180); // 0.0175弧度
    */

    //举例：画一个圆弧

    //开始创建新路径
    ctx.beginPath();
    // 创建一个半圆圆弧
    ctx.arc(250, 250, 200, 0, Math.PI, false);
    // 调用 stroke 绘制该路径
    ctx.stroke();

    //举例：绘制部分圆

    //开始创建路径
    ctx.beginPath();
    //创建一个圆弧
    ctx.arc(250, 250, 200, 0, 0.75 * Math.PI, false);
    //填充该圆弧
    ctx.fill();

    //绘制一个圆

    // 开始创建新路径
    ctx.beginPath();
    // 设置开始角度为0，结束角度为 2π 弧度
    ctx.arc(250, 250, 200, 0, 2 * Math.PI, false);
    // 使用 fill 自动闭合圆弧路径，然后填充圆弧区域
    ctx.fill();
</script>

5.绘制圆角矩形

<canvas id="mycanvas" width="500" height="500" style="background-color: #ddd"></canvas>
<script>
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");

    //圆角矩形左上角横坐标
    var x = 120;
    //圆角矩形左上角纵坐标
    var y = 120;
    //圆角矩形的宽度
    var width = 250;
    //圆角矩形的高度
    var height = 250;
    //圆角的半径
    var radius = 50;


    // 开始创建新路径
    ctx.beginPath();
    // 绘制左上角圆角
    ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
    // 绘制顶边路径
    ctx.lineTo(width - radius + x, y);
    // 绘制右上角圆角
    ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
    // 绘制右边路径
    ctx.lineTo(width + x, height + y - radius);
    // 绘制右下角圆角
    ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
    // 绘制底边路径
    ctx.lineTo(radius + x, height +y);
    // 绘制左下角圆角
    ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
    // 闭合路径 也可使用 context.lineTo(x, y + radius);
    ctx.closePath();
    // 设置绘制的颜色
    ctx.strokeStyle = '#188eee';
    ctx.stroke();

</script>

6.绘制文本

<canvas id="mycanvas" width="500" height="500" style="background-color: #ddd"></canvas>
<script>
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");
    //绘制填充的文本
    ctx.fillText('绘制文本-fillText', 20, 50);
    //绘制空心文本
    ctx.strokeText('绘制文本-strokeText', 20, 100);

    ctx.font = '60px 黑体';
    ctx.strokeText('strokeText2', 20, 150);
</script>

7.设置颜色

<canvas id="mycanvas" width="500" height="500" style="background-color: #ddd"></canvas>
<script>
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");

    //修改填充的颜色
    ctx.fillStyle = "blue";
    //修改描边的颜色
    ctx.strokeStyle = 'yellow';
    ctx.fillRect(50, 50, 160, 160);
    ctx.strokeRect(300, 300, 50, 50);
    /*
    * 注意要符合css3颜色标准
    *
    */
    //    ctx.fillStyle = 'red';
    //    ctx.fillStyle = '#ff0000';
    //    ctx.fillStyle = 'rgb(255,0,0)';
    //    ctx.fillStyle = 'rgba(255,0,0,1)';

</script>

8.修改线宽

<canvas id="mycanvas" width="500" height="500" style="background-color: #ddd"></canvas>
<script>
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");

    //举例：设置线条宽度为5

    //在绘制线条之前，设置
    ctx.lineWidth = 5;
    ctx.strokeRect(10, 10, 200, 200);

</script>

9.擦除canvas

<canvas id="mycanvas" width="500" height="500" style="background-color: #ddd"></canvas>
<script>
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");

    //开始设置路径
    ctx.beginPath();
    //填充颜色
    ctx.fillStyle = "red";
    //绘制圆形区域
    ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
    //使用fill填充圆形区域
    ctx.fill();
    //擦除指定区域(x,y,width,height)
    ctx.clearRect(50, 50, 50, 50);
    //清除整个画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
</script>