第二十八篇，HTML5之Canvas画布操作

最新推荐文章于 2022-11-30 17:41:04 发布

萌新求大佬

最新推荐文章于 2022-11-30 17:41:04 发布

阅读量287

点赞数 1

分类专栏： HTML 文章标签： HTML Canvas

本文链接：https://blog.csdn.net/weixin_43779803/article/details/103349462

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是画布

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

具体问题可以参考HTML 5 Canvas这里就不多做解释，直接上案例。

案例1

在这里插入图片描述
像一个这种的怎么使用画布绘图呢，其实很简单，首先先给画布一个500*500的面积，之后就可以在里面绘图了，先画一个三角形，在画个矩形就可以了，三角形添加填充颜色，大矩形里面的两个矩形都可以使用，直接上代码：

<body>
<canvas id="cavsElem">
你的浏览器不支持画布
</canvas>
<script>
var canvas=document.getElementById('cavsElem'); //获得画布
var context=canvas.getContext('2d'); //获得上下文
var context1=canvas.getContext('2d')
//设置标签的属性宽高和边框
canvas.width=500; 
canvas.height=500;
canvas.style.border="1px solid #000"; //画布的线条的宽度颜色类型
//开始绘制三角形
context.strokeStyle="red";
context.fillStyle="green";
context.beginPath(); //开始路径
context.moveTo(200,50); 
context.lineTo(50,150); 
context.lineTo(350,150);  
context.closePath(); //关闭结束
context.strokeStyle = "red"; //设置描边颜色
context.lineWidth = 5;
context.stroke(); //描边路径
context.fillStyle = 'green'; //填充颜色
context.fill(); //填充颜色，默认黑
context.lineWidth=5;
context.strokeRect(50,150,300,150);
context.strokeRect(80,180,80,80);
context.fillRect(250,200,60,100);
context.fill();
context.stroke();
</script>
</body>

案例圆弧

在这里插入图片描述
上面就使用到了画布的圆弧操作：

	<body>
		<canvas id="cavsElem">您的浏览器不支持canvas标签</canvas>
		<script>
			var canvas=document.getElementById('cavsElem');
			var context=canvas.getContext('2d');
			canvas.width=500;
			canvas.height=500;
			canvas.style.border="1px solid #000";
			context.beginPath();
			context.lineWidth=5;
			context.strokeStyle="green";
			context.arc(100,100,80,2*Math.PI/3,3*Math.PI/2);
			context.fillStyle="red";
			context.fill();
			context.stroke();
			context.beginPath();
			context.lineJoin="round";
			context.moveTo(100,20);
			context.lineTo(300,20);
			context.lineTo(60,170);
			context.stroke();
			</script>
	</body>

案例圆

在这里插入图片描述
在画布上画圆

<body>
<canvas id="cavsElem" style="background-color:gray" width="300px" height="300px">
您的浏览器不支持canvas标签。
</canvas>
<script>
var context=document.getElementById('cavsElem').getContext('2d');
context.beginPath();
context.arc(150,150,120,0,2*Math.PI,true);
context.closePath();
context.strokeStyle= 'red';
context.stroke();
context.beginPath();
context.arc(150,150,100,0,2*Math.PI,true);
context.closePath();
context.strokeStyle= 'red';
context.stroke();

context.beginPath();
context.moveTo(150,30)
context.lineTo(150,50)
context.closePath();
context.strokeStyle = 'red';
context.stroke()

context.beginPath();
context.moveTo(150,250)
context.lineTo(150,270)
context.closePath();
context.strokeStyle = 'red';
context.stroke()

context.beginPath();
context.moveTo(30,150)
context.lineTo(50,150)
context.closePath();
context.strokeStyle = 'red';
context.stroke()

context.beginPath();
context.moveTo(250,150)
context.lineTo(270,150)
context.closePath();
context.strokeStyle = 'red';
context.stroke()

context.beginPath();
context.moveTo(65,65)
context.lineTo(79,79)
context.closePath();
context.strokeStyle = 'red';
context.stroke()

context.beginPath();
context.moveTo(235,65)
context.lineTo(220,79)
context.closePath();
context.strokeStyle = 'red';
context.stroke()

context.beginPath();
context.moveTo(65,235)
context.lineTo(79,220)
context.closePath();
context.strokeStyle = 'red';
context.stroke()

context.beginPath();
context.moveTo(235,235)
context.lineTo(220,220)
context.closePath();
context.strokeStyle = 'red';
context.stroke()
</script>
</body>

案例渐变色

在这里插入图片描述

	<body>
		<canvas id="cavsElem">
		您的浏览器不支持canvas标签。
		</canvas>
		<script>
			var canvas=document.getElementById('cavsElem');
			var context=canvas.getContext('2d');
			canvas.width=500;
			canvas.height=500;
			context.arc(250,250,200,0,2*Math.PI);
			lg2 = context.createLinearGradient(100,100,400,400);
			lg2.addColorStop(0 , "#FF0033");
			lg2.addColorStop(0.5, "#FFFFFF");
			lg2.addColorStop(1 , "#87CEFA");
			context.fillStyle = lg2;
			context.fill();
			context.strokeStyle = lg2;
			context.stroke();
		</script>
	</body>

注意：createLinearGradient(100,100,400,400)，这里面的两个参数context.createLinearGradient(x0,y0,x1,y1)
在这里插入图片描述
可以参考HTML5 canvas createLinearGradient() 方法

萌新求大佬

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第二十八篇，HTML5之Canvas画布操作

什么是画布HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。具体问题可以参考HTML 5 Canvas这里就不多做解释，直接上案例。案例1像一个这种的怎么使用画布绘图呢，其实很简单，首先先给画布一个500*500的面积，之后就可以在里面绘图了，先...
复制链接

扫一扫