【HTML5】在canvas上绘制简单的2D图形 （+太极图）

canvas（画布）

canvas 元素是H5中新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用 canvas api 在其中进行图形的描绘。

<canvas id="app" height="300" width="400" style="background-color: #f5f5f5;"> </canvas>
<script>
  //获取canvas元素
  var app = document.querySelector("#app")
  //获取CanvasRenderingContext2D实例对象，利用该实例对象提供的方法进行图形绘制
  var context = app.getContext("2d");
  //绘制
  context.fillStyle = "pink"
  context.fillRect(0,0,100,100);
</script>

画布本身是一个标签，没有绘图功能，有绘图功能的是图形上下文，图形上下文是一个封装了很多绘图功能的对象。

当 getContext() 方法参数为 “2d” 的时候，获取到 2D上下文 。使用2D上下文提供的方法，可以绘制简单的2D图形，比如矩形，弧线和路径。2D上下文的坐标开始于canvas元素的左上角，原点坐标是(0,0)。

绘制图形步骤

<canvas id="canvas" width="400" height="400" style="border:2px solid #aaa"></canvas>
<script>
    window.onload=function(){
        //1、获取画布对象 
        var canvas = document.getElementById('canvas')
        //2、获取2D图形上下文
        var context = canvas.getContext('2d');
        //3、设置绘图样式
        context.fillStyle='pink';	//填充的样式
        context.strokeStyle='red'; 	//图形边框的样式       
        //4、指定线宽
        context.lineWidth=5;      
        //5、绘制矩形（参数：起始点x，y坐标，宽度，高度）
        context.fillRect(100,100,200,200);	//填充矩形
        context.strokeRect(0,0,100,100);	//绘制矩形边框
        context.clearRect(150,150,50,50);	//清除画布中的矩形框
        context.clearRect(200,200,50,50);
    }
</script>

需要注意的是，矩形是唯一一种可以直接在2d上下文中绘制的形状。

绘制路径–圆形

<canvas id="canvas" width="400" height="400"></canvas>
<script>
    window.onload=function(){
        var canvas = document.getElementById('canvas')
        var context = canvas.getContext('2d');
        //1、开始创建路径
        context.beginPath();
        //2、设置路径(参数：圆心x，y坐标，半径，开始角度，结束角度，绘制方向(true为逆时针，false为顺时针))
        // Math.PI ==> 180deg
        context.arc(200, 200, 100, Math.PI / 180 * 0, Math.PI / 180 * 180, false);
        //3、关闭路径
        context.closePath();
        //4、设定绘制样式，进行图形绘制
        context.fillStyle='coral';
        context.fill()	//填充图形
        context.strokeStyle='red';
        context.stroke()  
    }
</script>

绘制路径–直线

<canvas height="400" width="400" id="canvas"></canvas>
<script>
    window.onload=function(){
        var canvas = document.getElementById('canvas')
        var context = canvas.getContext('2d');
        //楼梯状
        //直线的起点（参数：x,y坐标）
        context.moveTo(0, 0);
        //直线的终点
        context.lineTo(50, 0);
        context.lineTo(50, 50);
        context.lineTo(100, 50);
        context.lineTo(100, 100);
        context.strokeStyle='yellow';
        context.stroke();
    }
</script>

绘制渐变–线性 / 径性

绘制线性渐变时需要使用LinearGradient对象，通过2D上下文来创建和修改。

<canvas height="400" width="400" id="canvas"></canvas>
<script>
    window.onload=function(){
        var canvas = document.getElementById('canvas')
        var context = canvas.getContext('2d');
        //1、创建渐变对象（参数：起始点x，y坐标，结束点x，y坐标）
        var gradient = context.createLinearGradient(0, 200, 400, 200);
        //2、添加渐变颜色（参数：0-1之间的偏移量，颜色值）
        gradient.addColorStop(0, 'red');
        gradient.addColorStop(0.5, 'blue');
        gradient.addColorStop(1, 'yellow');
        //3、设置填充渐变
        context.fillStyle=gradient;
        //4、使用渐变绘制矩形
        context.fillRect(100,100,200,200);
    }
</script>

径向渐变是指沿着圆形的半径方向向外进行扩展的渐变方式，需要使用RadialGradient对象，通过2D上下文来创建：context.createRadialGradient()，参数：起始圆的圆心x坐标，y坐标，半径，结束圆的圆心x坐标，y坐标，半径。

如果想从某个形状的中心点开始创建一个向外扩散的径向渐变的效果，就要将两个圆定义为同心圆。

绘制变形–平移 / 扩大 / 旋转

绘制图形的时候，我们可能经常会想要旋转图形，或者对图形进行变形处理，使用Canvas API的坐标轴变换处理功能，可以实现这种效果。

• context.translate(x,y)
  参数：坐标原点在x轴、y轴方向移动的单位。
• context.scale(x,y)
  参数：水平方向、垂直方向放大的倍数。如果是缩小，将这两个参数设为0到1之间的数就可以。
• rotate(angle)
  参数：旋转的角度。旋转的中心点是坐标轴的原点，旋转是以顺时针方向进行的，要想逆时针旋 转时，将angle设定为负数即可。

绘制图像

在HTML5中，不仅可以使用Canvas API绘制图形，还可以读取磁盘或网络中的图像文件，然后使用Canvas API将该图像绘制在画布中。

<canvas height="400" width="400" id="canvas"></canvas> 
<script>
    window.onload=function(){
        var canvas = document.getElementById('canvas')
        var context = canvas.getContext('2d');
		//创建图像对象
        var image = new Image()
        image.src='./image/photo.jpg'
        image.onload=function(){
        	//绘制图像（参数：图像对象，绘制位置的起始x，y坐标，图像的宽，高）
            context.drawImage(image, 100, 100, 200, 200);
        }            
    }
</script>

注意：当图像文件是一个来源于网络的比较大的图像文件时，用户就需要耐心等待图像全部装载完毕才能看到该图像，这种情况下可以使用image.onload方法来解决。

• 图像平铺：createPattern(image,type)

type的取值可以为：repeat、repeat-x、repeat-y、no-repeat。

var pattern = createPattern(image,'repeat');
context.fillStyle = pattern;
context.fillRect(100, 100, 200, 200);

• 图像剪裁：context.clip()

context.beginPath();
context.arc(200, 200, 100, Math.PI / 180 * 0, Math.PI / 180 * 360);
context.closePath();
context.clip();

这个方法会把Canvas的当前路径裁剪下来，一旦调用了clip方法之后，接下来向Canvas绘制图形时，clip()裁剪的路径覆盖的部分才会被显示出来。

绘制文本

在HTML5中，可以在Canvas画布中进行文字的绘制，同时也可以指定绘制文字的字体大小，对齐方式，文字文理填充等。

<canvas height="400" width="400" id="canvas"></canvas>
<script>
    window.onload = function(){
        var canvas = document.getElementById('canvas')
        var context = canvas.getContext('2d');
        //设置文字字体
        context.font = 'italic 50px sans-serif';
        //设置文本基线
        context3.textBaseline = 'top';
        //设置文本对齐方式			
		context3.textAlign = 'start';
        //绘制填充文本（参数：文字、起点的x,y坐标、文本宽度）
        context.fillText('hello', 200, 200, 200);   
        context.fillStyle='teal';	//文本填充
        //绘制勾勒文本
        context.strokeText('hello', 200, 200, 200);  
        context.strokeStyle='pink'; 	//文本描边
    }
</script>

学完了canvas上绘制图形的基础知识，下面我们就来实际操作一下，绘制一个简单的太极图吧~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极图</title>
    <script>
        window.onload=function(){
            var canvas = document.getElementById('canvas')
            var context = canvas.getContext('2d');
            // 大圆
            context.beginPath()
            context.arc(200, 200, 200, Math.PI / 180 * 90, Math.PI / 180 * 270);
            context.closePath();
            context.fillStyle='black';
            context.fill()

            context.beginPath()
            context.arc(200, 200, 200, Math.PI /180* 270, Math.PI /180* 90);
            context.closePath();
            context.fillStyle='red';
            context.fill()

            //中圆
            context.beginPath()
            context.arc(200, 100, 100, Math.PI / 180 * 0, Math.PI / 180 * 360);
            context.closePath()
            context.fillStyle='black'
            context.fill()

            context.beginPath()
            context.arc(200, 300, 100, Math.PI / 180 * 0, Math.PI / 180 * 360);
            context.closePath()
            context.fillStyle='red'
            context.fill()
            
            //小圆
            context.beginPath()
            context.arc(200,100,20,Math.PI / 180 * 0, Math.PI / 180 * 360)
            context.closePath()
            context.fillStyle='red'
            context.fill()
            
            context.beginPath()
            context.arc(200,300,20,Math.PI / 180 * 0, Math.PI / 180 * 360)
            context.closePath()
            context.fillStyle='black'
            context.fill()
        }
    </script>
</head>
<body>
    <canvas height="400" width="400" id="canvas"></canvas>
</body>
</html>

如果我们想让太极图转动起来，只需要给它添加动画样式就可以了：

<style>
	canvas{
    	animation: move 1s linear infinite;
    }
    @keyframes move {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }
</style>

是不是很简单呀~~大家都来试着绘制一下自己的图形吧！另外，如果有童鞋不了解动画样式怎么使用，可以看我之前的文章：HTML&CSS >> 动画，希望可以帮助到你~