HTML5 高级之canvas 绘制图形

最新推荐文章于 2024-02-26 11:07:08 发布

VIP文章猫爷001

最新推荐文章于 2024-02-26 11:07:08 发布

阅读量5.8k

点赞数 3

分类专栏： HTML5 文章标签： HTML5 canvas

本文链接：https://blog.csdn.net/maoye198602102339/article/details/82941084

版权

canvas是HTML5中新增的标签，像所有dom一样，拥有自己的属性、方法、和事件，其中就有绘图的方法，js能够调用它在网页上完成绘图。

canvas也是HTML5中最强大的特性之一，允许开发者使用动态和交互式方法在web上实现桌面应用程序的功能

canvas元素会在网页上创建一个空白区域，然后通过API操作这个区域，与空白的div元素相似，用途完全不同

语法：<canvas id="ddd" width="200" height="200"></canvas>

绘制矩形：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	<script type="text/javascript">
		function init(argument) {
			//获取canvas区域
			var canvas = document.getElementById("canvas");
			//获取绘图canvas的上下文，接收两个参数2d或者3d
			var ctx = canvas.getContext("2d");
			//绘制一个带描边的矩形 参数：（x,y,width,height）
			ctx.strokeRect(10,10,260,260);
			//绘制一个颜色实心的矩形
			ctx.fi

最低0.47元/天解锁文章

猫爷001

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
2
评论
HTML5 高级之canvas 绘制图形

canvas是HTML5中新增的标签，像所有dom一样，拥有自己的属性、方法、和事件，其中就有绘图的方法，js能够调用它在网页上完成绘图。canvas也是HTML5中最强大的特性之一，允许开发者使用动态和交互式方法在web上实现桌面应用程序的功能 canvas元素会在网页上创建一个空白区域，然后通过API操作这个区域，与空白的div元素相似，用途完全不同语法：&lt;c...
复制链接

扫一扫