2022、7、15-画布标签

最新推荐文章于 2024-03-14 15:39:16 发布

Ω一Ω一Ω

最新推荐文章于 2024-03-14 15:39:16 发布

阅读量88

点赞数 1

分类专栏：笔记文章标签：大数据

本文链接：https://blog.csdn.net/m0_63498249/article/details/125807930

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5的Canvas元素及其使用方法，包括如何创建画布、获取2D渲染上下文、绘制线条、填充颜色、绘制矩形以及创建三角形和圆。通过实例代码展示了如何绘制直线、三角形、矩形和虚线，以及填充颜色。此外，还演示了如何画圆以及设置虚线样式。这些基础知识是进行Canvas图形编程的基础。

摘要由CSDN通过智能技术生成

什么是canvas：

canvas是一个画布标签,默认情况下它在页面上是一块空白的区域，大小300*150px

canvas的使用

创建画布：

<body>
        <canvas id="canvas" width="500" height="500">您的浏览器版本太低，不支持画布，请更新浏览器</canvas>
</body>

步骤：

1. 获取一个画布（要创建一个画布对象）
var canvas=document.getElementById("canvas"); //id可写其它
2. 创建一个画布上下文对象
var context=canvas.getContext("2d");
3. 告诉程序绘画路径开始
context.beginPath();
4. 绘制图形的起始点(x坐标，y坐标)
context.moveTo(x坐标，y坐标);
5. 绘制图形的连接点可以多个连接成图
context.lineTo(x坐标，y坐标);

        context.closePath();         //终止点可闭合
6. 设置图形的样式即图形边框色        context.strokeStyle="颜色";
7. 描边        context.stroke();

设置填充的颜色图像内部颜色        context.fillStyle="颜色";
填充颜色        context.fill();

调用一个画矩形的函数        fillRect(x,y,width,height)

例如：

效果为一条直线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500">您的浏览器版本太低，不支持画布，请更新浏览器</canvas>
		<script type="text/javascript">
            var canvas=document.getElementById("canvas");
            var context=canvas.getContext("2d");
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(100,100);
            context.lineTo(100,0);
            context.closePath();
            context.strokeStyle="red";
            context.stroke();
        </script>
	</body>
</html>

实例-三角形

`效果图：`

js整体部分


var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.beginPath();
context.moveTo(0,0);
context.lineTo(100,100);
context.lineTo(100,0);

context.closePath();
context.strokeStyle="red";
context.stroke();
			
context.fillStyle="red";	//设置要给图片填充的颜色  图像内部颜色
context.fill();	//填充颜色

实例：矩形：

			var canvas=document.getElementById("canvas");
			var context=canvas.getContext("2d");
			// 调用一个画矩形的函数
			context.strokeStyle="red";
			context.strokeRect(0,0,200,100);
			context.fillStyle="blue";
            //fillRect(x,y,width,height)
			context.fillRect(0,0,200,100);
            //内框
			context.clearRect(10,10,20,20);

实例-虚线：

for循环：


    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    //使用循环：做重复的事情
    for (var i = 0; i < 100; i++) {
        context.beginPath();
        context.moveTo(10 * i, 0);
        context.lineTo(10 * i + 5, 0);
        context.closeWidth = 5;
        context.stroke();
    }

js:

let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
context.moveTo(100, 100);
context.lineTo(400, 100);
context.lineWidth = 2;
context.strokeStyle = "red";
context.setLineDash([5, 5]);
console.log(context.getLineDash());
context.lineDashOffset = -50;
context.stroke();

实例-圆：

PI*0.5、PI、PI*1.5、PI*2。PI*2为2时完整的圆，PI为半圆

true:顺时针

false:逆时针

        //1．获取一个画布（要创建一个画布对象)
		var canvas=document.getElementById("canvas");
		// 2．创建一个画布上下文对象
		var context=canvas.getContext("2d");
		//画圆形
		context.beginPath();
		context.arc(100,100, 50,0,Math.PI,true); 
		context.stroke();
		context.beginPath();
		context.arc( 200,100, 50,0,Math.PI,false);
		// context.closePath();
		context.stroke();