前端——HTML 5绘图元素canvas

最新推荐文章于 2023-06-09 11:35:33 发布

VIP文章 NO0b

最新推荐文章于 2023-06-09 11:35:33 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签： canvas CanvasRenderingContext2D

本文链接：https://blog.csdn.net/q5706503/article/details/82779458

版权

<canvas.../>元素是HTML5新增的绘图元素，本身功能有限但是可以通过它获取一个CanvasRenderingContext2D对象，该对象是个强大的绘图API。控制该对象绘图需要使用Java Script。

canvas就像一张画纸本身并没有什么功能，常用的属性就是height和width来设置画纸的宽和高，要想绘图需要三步：

获取<canvas.../>元素的DOM对象Canvas
调用Canvas的getContext()方法获取CanvasRenderingContext2D对象
调用CanvasRenderingContext2D对象的丰富方法绘图

基本代码如下：

<body>
	<h2>canvas绘图</h2>
	<canvas id="mc" width="500" height="400" style="border:1px solid black"></canvas>

	<script type="text/javascript">
		var canvas=document.getElementById('mc');
		var ctx=canvas.getContext('2d');
                //ctx.各种绘图方法();
         </script>
</body>

关于CanvasRenderingContext2D对象的细节和方法感兴趣可以打开下面的网页：

最低0.47元/天解锁文章

NO0b

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端——HTML 5绘图元素canvas

&lt;canvas.../&gt;元素是HTML5新增的绘图元素，本身功能有限但是可以通过它获取一个CanvasRenderingContext2D对象，该对象是个强大的绘图API。控制该对象绘图需要使用Java Script。canvas就像一张画纸本身并没有什么功能，常用的属性就是height和width来设置画纸的宽和高，要想绘图需要三步：获取&lt;canvas.../&gt;元...
复制链接

扫一扫