Canvas基础

canvas 概述

简介

功能	详情
绘制图形	使用canvas可以绘制各种基本图形，如矩形、曲线、圆等，也可以绘制各种复杂绚丽的图形。
绘制图表	使用canvas可以绘制满足各种需求的图表。
动画效果	可以制作各种华丽的动画效果
游戏开发	HTML5在游戏开发领域具有举足轻重的地位

canvas 与 SVG

HTML5 有两个主要的2D图形技术：Canvas 和 SVG。事实上，Canvas 与 SVG 是两门完全不同的技术，两者具有以下区别：

Canvas	SVG
Canvas 是使用javascript 动态生成的	SVG 是使用XML 静态描述的
Canvas 是基于“位图”的，适用于像素处理和动态渲染，放大图形会使图形失真。（使用canvas 绘制出来的是一个“位图”）	SVG 是基于“矢量”的，不适用于像素处理，适合静态描述，放大图形也会使图形失真。（使用SVG 绘制出来的是“矢量图”）
美术	几何

canvas 元素

canvas元素简介

canvas是一个行内块元素，一般需要指定3个属性：id,width,height。
默认情况下，Canvas元素的宽度为300px，高度为150px。
对于canvas的宽度和高度，有两种方法定义：

1. 在HTML属性中定义；
2. 在CSS样式中定义。

一定不要在CSS样式中定义，而应该在HTML属性中定义。

如果在CSS样式中定义，Canvas 元素的宽度和高度是默认值，而不是所定义的宽度和高度，这样就无法获取Canvas元素正确的宽度和高度。获取Canvas元素实际的宽度和高度是Canvas开发中最常用的操作，因此对于Canvas元素的宽度和高度，一定要在HTML属性中定义，而不是在CSS样式中定义。

canvas对象

获取canvas对象的方法：

const cmv = document.getElementById();

Canvas对象的常用属性

属性	说明
width	canvas对象的宽度
height	canvas对象的高度

Canvas对象的常用方法

属性	说明
getContext(“2d”)	获取Canvas 2D 上下文环境对象
toDataURL()	获取Canvas对象产生的位图的字符串

直线图形

直线

canvas 坐标系

canvas使用的坐标系是W3C坐标系，与数学坐标系的区别在于 y 轴正方向的不同。

直线的绘制

一条直线

语法：

cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.stroke();

实例：

<canvas id="canvas" width="200" height="150" style="border: 1px solid gray;"></canvas>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            ctx.moveTo(50,100);
            ctx.lineTo(150,50);
            ctx.stroke();
        }
    </script>

效果图：

多条直线

语法：

cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.lineTo(x3,y3);
...
cxt.stroke();

实例：

 <canvas class="" id="canvas" width="200" height="200" style="border:1px solid red"></canvas>
    <script type="text/javascript">
        window.onload = function () {
            const cnv = document.getElementById('canvas');
            const cxt = cnv.getContext('2d');
            
            cxt.moveTo(50,150);
            cxt.lineTo(100,50);
            cxt.lineTo(150,150);
            cxt.lineTo(50,150);
            cxt.stroke();
        }
    </script>

效果图：

矩形

描边矩形

语法：

cxt.strokeStyle=属性值;
cxt.strokeRect(x,y,width,height);

strokeStyle属性：
strokeStyle属性取值有3种：颜色值、渐变色和图案。

cxt.strokeStyle="ff0000"; //十六进制颜色值
cxt.strokeStyle="red";    //颜色关键字
cxt.strokeStyle="rgb(255,0,0)" //rgb颜色值
cxt.strokeStyle="rgba(255,0,0,0.8)" //rgba颜色值

strokeRect()方法
strokeRect()方法用于确定矩形的坐标，其中(x,y)为矩形左上角点的坐标。
strokeStyle属性必须在使用strokeRect() 方法之前定义，否则strokeStyle属性无效。
实例：

    <canvas class="" id="canvas" width="300" height="300" style="border: 1px solid grey;"></canvas>
    <script type="text/javascript">
        window.onload = function () {
            const canvas = document.getElementById("canvas");
            const ctx = canvas.getContext("2d");

            ctx.strokeStyle = "lightgreen";

            ctx.strokeRect(100,100,100,100);
        }
    </script>

效果图

填充矩形

语法：

cxt.fillStyle=属性值;
cxt.fillRect(x,y,width,height);

fillStyle属性跟strokeStyle属性一样，取值也有3种：颜色值、渐变色和图案。
fillRect()方法跟strokeRect()方法一样，用于确定矩形的坐标。
跟描边矩形一样，填充矩形的fillStyle属性也必须在使用fillRect()方法之前定义，否则fillStyle属性无效。
实例：

    <canvas class="" id="canvas" width="200" height="200" style="border: 1px solid grey;"></canvas>
    <script type="text/javascript">
        window.onload = function () {
            const canvas = document.getElementById("canvas");
            const ctx = canvas.getContext("2d");

            ctx.strokeStyle = "green";
            ctx.strokeRect(50,50,100,100);

            ctx.fillStyle = "red";
            ctx.fillRect(50,50,100,100);
        }
    </script>

效果图：