HTML应用开发基础篇-Canvas画布

最新推荐文章于 2023-04-13 15:45:36 发布

来者不是客

最新推荐文章于 2023-04-13 15:45:36 发布

阅读量198

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43305922/article/details/100641415

版权

具体也不详细说那么多，直接看代码吧：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas基础操作</canvas></title>
		<style type="text/css">
			canvas{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<!--声明canvas，另外不要用CSS设置 width 和height -->
		<canvas id="can" width="800" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var can=document.getElementById("can");	//获取 canvas 对象
		var ctx=can.getContext("2d");	//获取 canvas 操作对象
		
		//绘制矩形
		//设置起始坐标以及矩形长宽
		ctx.rect(30,30,200,100);
		
		//设置属性
		ctx.lineWidth=5;	//画笔的宽度
		ctx.strokeStyle="black";	//画笔描边的颜色
		ctx.fillStyle="darkgray";	//填充的颜色
		ctx.font="small-caps bold 30px arial"	//设置文本样式
		ctx.fillText("小练习",200,500);	//在画布上输出文本
		ctx.stroke(); //描边
		ctx.fill();  //填充颜色
		
		//画直线
		ctx.beginPath();	//封闭路径，这次所绘制的和上面没有关联。如果不加这个，某些属性将会和之前设置的发生覆盖
		ctx.strokeStyle="red";	//更改颜色，如果不设置将使用前面设置的相关属性
		ctx.lineTo(100,100);	//表示直线终点的位置，若前面没有起始点则不表示任何含义
		ctx.moveTo(200,200);	//移动起始点，如果没有这个将从上次设置的起始点开始
		ctx.lineTo(300,300);	
		ctx.stroke();
		ctx.closePath();
		
		//画圆
		ctx.beginPath();
		ctx.arc(200,200,30,0,2*Math.PI);	//分别设置圆心坐标、半径以及起始和终止角（弧度单位）还有一个可选属性设置顺时针或者逆时针
		ctx.strokeStyle="darkmagenta";
		ctx.lineWidth=5;
		ctx.stroke();
		ctx.closePath();
		
		//画圆弧
		ctx.beginPath()

最低0.47元/天解锁文章

来者不是客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML应用开发基础篇-Canvas画布

具体也不详细说那么多，直接看代码吧：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>canvas基础操作</canvas></title> <style type="text/css"> canvas{ ...
复制链接

扫一扫