canvas---- 绘制矩形和圆形

最新推荐文章于 2022-02-18 14:31:22 发布

?� ?? � ?

最新推荐文章于 2022-02-18 14:31:22 发布

阅读量340

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/Cg_Companion_Xi/article/details/105447582

版权

html5为我们提供了非常有特色的标签，canvas标签为我们可以实现在网页中画图提供了便利，接下来我们列举他的常用操作。
新建一个html5的文档，建立一个canvas画布，设置长和宽，这里需要注意的是，canvas标签可以在标签内设置width,height,也能通过css来设置，但是通过css来设置的标签，当绘制图形的时候会变形，所以建议直接在标签内设置。

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500"></canvas>
	</body>
	</html>

canvas画布本身不能绘画，它必须通过javascript来实现它的绘画功能，getContext(‘2d’),是它里面的内部对象，它里面封装了绘画的方法，大家一看见2d是不是很兴奋，但是canvas很纯洁，并没有3d功能，我们建立好了模版，可以进行下一步了。

	function draw(){
		var canvas = document.getElementById('canvas'); //拿到画布
		var ctx = canvas.getContext('2d');		//创建画笔
	 }
	window.onload = function(){
		draw();
	}

绘制一个不填充矩形，strokeRect() 可以绘制一个（不填充）的矩形，strokeStyle 可以为绘制出来的矩形添加边框颜色。如果没有写strokeStyle ，则默认为黑色边框。
如果需要绘制一个填充的矩形，则使用 fillRect() 方法,可以绘制一个的矩形，fillStyle 可以为这个矩形填充所需要的颜色。
strokeRect(x,y,width,height) ------ x ，y 表示距离原点的坐标；width 表示绘制矩形的宽； height 表示绘制矩形的高。
注意：绘制的颜色必须写在绘制图形之前，不然没效果。

function draw(){
			var canvas = document.getElementById('canvas');
			var ctx = canvas.getContext('2d');
			ctx.beginPath(); //
			// ctx.fillStyle = "red";
			ctx.strokeStyle = "red"
			ctx.strokeRect(30,30,200,200);
	 		ctx.closePath();
		}
		window.onload = function(){
			draw();
		}

在这里插入图片描述
绘制一个圆型，beginPath ();表示路径开始，ctx.arc(250,200,90,0,2*Math.PI,true);;参数解释，前两个代表xy，第三个代表半径，第四个代表起始角，第五个代表结束角（圆周率），第六个代表顺逆，

        var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		ctx.beginPath();
		ctx.arc(250,200,90,0,2*Math.PI,true);
		ctx.stroke();

在这里插入图片描述

?� ?? � ?

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas---- 绘制矩形和圆形

html5为我们提供了非常有特色的标签，canvas标签为我们可以实现在网页中画图提供了便利，接下来我们列举他的常用操作。新建一个html5的文档，建立一个canvas画布，设置长和宽，这里需要注意的是，canvas标签可以在标签内设置width,height,也能通过css来设置，但是通过css来设置的标签，当绘制图形的时候会变形，所以建议直接在标签内设置。 <!DOCTYPE htm...
复制链接

扫一扫