HTML5画布（canvas）绘制三角形，矩形，圆形

canvas标签：<canvas id="cavsElem"width="400" height="300">您的浏览器不支持canvas</canvas>1.定义id属性是为了在JavaScript代码中引用元素2.标签中间的文字在浏览器不支持canvas的情况下才会显示3.canvas标签与img标签一样，有两个原生属性width和height默认300*500像素4.

空谷丶幽兰

9747人浏览 · 2020-09-29 23:11:57

空谷丶幽兰 · 2020-09-29 23:11:57 发布

canvas标签：

<canvas id="cavsElem"  width="400" height="300">您的浏览器不支持canvas</canvas>

	1.定义id属性是为了在JavaScript代码中引用元素
	2.标签中间的文字在浏览器不支持canvas的情况下才会显示
	3.canvas标签与img标签一样，有两个原生属性width和height
	  默认300*500像素
	4.不要用css控制它的宽和高，否则可能会引起画布上的图形变形

要在画布中绘制图形，首先要通过JavaScript的getElementById()函数
获取到网页中的画布对象
var canvas =document.getElementById(‘cavsElem’);

注：canvas画布默认为透明，背景色可以定义

准备画笔：

有了画布之后，开始作画需要准备画笔，这只画笔就是context对象，
context对象是画布的上下文，也叫作绘制环境，是所有的绘制操作API的
入口，该对象可以使用JavaScript脚本获得

	var context=canvas.getContext('2d');
	参数2d代表画笔的种类，这里用来执行二维操作,把参数替换为webgl，执行三维操作

坐标起始点：

	var context=canvas.getContext('2d');
	context.moveTo(x,y);
    上述x,y都是相对于画布的最左上角，使用context对象的moveTo()方法
    进行设置，相当于移动画笔到某个位置

绘制线条：

在canvas中使用lineTo()方法绘制直线：
context.lineTo(x,y);
"x,y"为线头点坐标，lineTo( )方法用于定义从x,y的位置绘制一条直线
到起点或者上一个线头点

路径：

路径是所有图形绘制的基础，例如绘制直线确定了起始点和线头点，便形成了一条绘制路径，如果绘制复杂路径，必须使用开始路径和闭合路径的方法

	context.beginPath();     //开始路径
	context.closePath();	 //闭合路径

开始路径的核心作用是将不同线条绘制的形状进行隔离，每次执行此方法
表示重新绘制一个路径，同之前绘制的路径可以分开样式设置和管理
闭合路径会自动把最后的线头和开始的线头连在一起

描边：

在canvas图形绘制中，路径只是草稿，真正的绘制先必须执行stroke()方法
根据路径进行描边

		context.storke();

利用Canvas绘制一个图形，基本步骤：

	1.创建画布：<canvas></canvas>
	2.准备画笔(获取上下文对象):canvas.getContext('2d');
	3.开始路径规划：context.beginPath();
	4.移动起始点：context.moveTo(x,y);
	5.绘制线(矩形，圆形，图片...)：context.lineTo(x,y)
	6.闭合路径:context.closePath();
	7.绘制路径：context.stroke();

绘制三角形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="cavsElem">
        您的浏览器不支持，请升级浏览器
    </canvas>
    <script>
        var canvas=document.getElementById('cavsElem');//获得画布
        var context=canvas.getContext('2d');    //获得上下文
        canvas.width=900;
        canvas.height=600;//设置标签的属性宽高和边框
        canvas.style.border="1px,solid #000";
        //绘制三角形
        context.beginPath();//开始路径
        context.moveTo(100,100); //三角形，左顶点
        context.lineTo(300,100);//右顶点
        context.lineTo(300,500);//底部的点
        context.closePath();  //结束路径
        context.stroke();  //描边路径 
        // context.fillStyle='pink'; //设置填充颜色
        // context.fill();  //填充
    </script>


</body>
</html>

使用JavaScript为画布设置宽高和边框，然后通过坐标确定了三角形的3个点
规划了绘制路径，最后描边，绘制出来三角形，
context.fill()方法用来填充
在这里插入图片描述
加上填充样式：
context.fillStyle=‘pink’;
context.fill();

在这里插入图片描述

绘制矩形：

	context.strokeRect(x,y,width,height);  //绘制矩形边框
	context.fillRect(x,y,width,height);  //绘制填充矩形

x,y代表矩形起点的纵横坐标，width和height代表要绘制矩形的宽和高，
需要注意的是两个方法可以单独使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="cavsElem">
        您的浏览器不支持，请升级浏览器
    </canvas>
    <script>
        var canvas=document.getElementById('cavsElem');//获得画布
        var context=canvas.getContext('2d');    //获得上下文
        canvas.width=900;
        canvas.height=600;
        canvas.style.border="1px solid #000"; //设置标签的属性宽高和边框
        context.strokeRect(200,50,200,100);
        context.fillRect(200,200,200,100);
        //清除矩形
        // context.clearRect(100,100,200,150);

    </script>


</body>
</html>

在这里插入图片描述
清除矩形：
context.clearRect(x,y,width,height);
x,y代表要清除矩形起点的横纵坐标，width和height代表要清除矩形的宽高

上面代码加上 context.clearRect(100,100,200,150); 就是如下效果：
在这里插入图片描述

绘制圆形：

在context中可以使用arc()方法来绘制弧形和圆形

context.arc(x,y,radius,startAngle,engAngle,bAntiClockwise)
x,y代表arc的中心点，radius代表圆形半径的长度，startAngle代表以
starAngle开始（弧度），endAngle代表以endAngle结束（弧度），
bAntiClockwise代表是否是逆时针，设置true是逆时针，false则为顺时针

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="cavsElem" width="900" height="600">
        您的浏览器不支持，请升级浏览器
    </canvas>
    <script>
        var context=document.getElementById('cavsElem').getContext('2d'); //获得上下文
       var canvas=document.getElementById('cavsElem');
       canvas.style.border="5px solid #ccc"; //设置画布边框
        context.beginPath();//开始路径
        context.arc(100,100,100,0,2*Math.PI,true); //会致圆形，true为逆时针
        context.closePath(); //关闭路径
        context.fillStyle='pink';//设置填充颜色
        context.fill(); //填充

        //绘制弧形
        context.beginPath();//开始路径
        context.strokeStyle="#fff"; //设置描边颜色
        context.lineWidth=5; //设置线的粗细
        context.arc(100,100,25,Math.PI/6,5*Math.PI/6,false); //绘制弧形
        context.stroke(); //描边


    </script>


</body>
</html>