canvas绘制基础示例

最新推荐文章于 2024-08-14 20:41:17 发布

LLbiu

最新推荐文章于 2024-08-14 20:41:17 发布

阅读量495

点赞数

分类专栏： JavaScript 前端文章标签： JavaScript css

本文链接：https://blog.youkuaiyun.com/LLbiu/article/details/81325965

版权

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

canvas标签

canvas：即画布的意思。标签使用<canvas></canvas>，是普通的HTML标签。可以设置width和height属性，但是单位必须为px。

设置canvas标签的宽高是通过其属性进行设置的，不要用css设置

<canvas width="600" height="600">
  ie9 以上才支持 canvas
		你的浏览器不支持canvas，请升级浏览器
</canvas>

canvas画布坐标系

canvas坐标系，从左上角0,0开始，x向右增大，y向下增大。

绘制canvas

第一步：拿到canvas标签

var canvas = document.getElementsByTagName('canvas')[0];

第二步：拿到canvas的上下文，'2d'表示绘制2d画笔。'webgl'表示3d画笔

var ctx =canvas.getContext("2d");

第三步：绘制，以下是绘制的基本步骤

1.设置绘制起点

ctx.moveTo(x,y);

2.绘制直线,可绘制多条，如果要绘制某个图形，则上一条直线与下一条直线的x或者y值需重合。

ctx.lineTo(x,y);

3.闭合路径

ctx.closePath();

为画出的直线描边，即画出的线在画布上显示

ctx.stroke();

完整源代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>	
</head>
<body>
	<!-- 设置canvas标签的宽高是通过canvas标签的属性进行设置。
	不要用css去设置 -->
	<canvas id='demo' width="600" height="600">
		ie9 以上才支持 canvas
		你的浏览器不支持canvas，请升级浏览器
		<!-- flash -->
	</canvas>

	<script>

	var canvas = document.getElementById('demo');
	
	var ctx = canvas.getContext('2d'); // 'webgl'

	
	//moveTo(x0,y0);
	ctx.moveTo(100,100); //把画笔移动到 100,100点
	ctx.lineTo(200,100); //从画笔的位置 画一条直线到 200,100点
	ctx.lineTo(100,200); //从当前位置，再画一条直线到 100,200点。

	
	ctx.closePath();// 闭合路径

	//设置线宽
	ctx.lineWidth = 4;
	//设置描边的样式
	// ctx.strokeStyle = 'rgba(233,233,233,.8)'; //跟上颜色， rgb(), rgba() red blue #888
	ctx.strokeStyle = 'red'; //跟上颜色， rgb(), rgba() red blue #888
	ctx.stroke();

	//设置填充的样式
	ctx.fillStyle = 'green';
	//进行填充的工作
	ctx.fill();

	</script>
</body>
</html>

示例图：