html-canvas 元素知识（1）

最新推荐文章于 2022-08-11 17:48:14 发布

power_to_go_l7

最新推荐文章于 2022-08-11 17:48:14 发布

阅读量118

点赞数

分类专栏：前端学习文章标签： HTML canvas

本文链接：https://blog.csdn.net/power_to_go_l7/article/details/90200240

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

使用canvas绘制图形，步骤

获取canvas对象
获取上下文环境对象context
开始绘制图形

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="200" height='150' style="border:1px dashed gray;"></canvas>
	</body>
	<script type="text/javascript">
		window.onload= function(){
			//获取canvas对象
			var cnv = document.getElementById("canvas");
			//获取上下文环境对象
			var cxt = cnv.getContext("2d");
			//开始绘制
			cxt.moveTo(50,100);
			cxt.lineTo(150,50);
			cxt.stroke();
		}
	</script>
</html>

注意：

canvas是块元素
在设置canvas宽/高度时可以在HTML属性中定义也可以在css样式中定义，但在实际开发中一定不要在css中定义。因为canvas本身有默认的宽、高度。
canvas目前对于IE只支持IE9以上的版本。对于IE7/8可以借助explorecanvas这个扩展解决（下载地址）。然后引入excanvas.js。

优惠劵

power_to_go_l7

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-canvas 元素知识（1）

使用canvas绘制图形，步骤获取canvas对象获取上下文环境对象context 开始绘制图形例：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body>...
复制链接

扫一扫