`

html5 canvas - first try

阅读更多
html5 canvas 标签,提供了画图功能;

可参考:http://www.w3schools.com/html5/tag_canvas.asp

简单例子:
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html 5 test</title>
		<script type="text/javascript">
			function init() {
				var canvas = document.getElementById("canvas");
				if (canvas.getContext) {
				  var ctx = canvas.getContext("2d");
				
				  ctx.fillStyle = "rgb(200,0,0)";
				  ctx.fillRect (10, 10, 55, 50);
				
				  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
				  ctx.fillRect (30, 30, 55, 50);
				}
			}
		</script>
	</head>
	<body onload="init();">
		<canvas id="canvas"></canvas>
	</body>
</html>
分享到:
评论

相关推荐

    Leaflet.Canvas-Markers-0.2.0

    Leaflet.Canvas-Markers是Leaflet的一个扩展,它引入了一种新的标记类型,即使用HTML5 Canvas元素来创建地图标记。与传统的SVG或图像标记相比,Canvas标记的优势在于其渲染性能。由于Canvas是在内存中绘制图形,因此...

    html2canvas-1.0.0-rc.4版本

    html2canvas-1.0.0-rc.4版本

    html2canvas-rc4.js和html2canvas.min.js

    标题中的"html2canvas-rc4.js和html2canvas.min.js"指的是HTML2canvas的两个不同版本。"rc4"通常代表Release Candidate 4,这是软件发布前的一个测试版本,而".min.js"则意味着这是一个经过压缩和优化的版本,适合在...

    vue-canvas-poster 海报合成

    在这个“vue-canvas-poster”项目中,我们将探讨如何结合Vue和Canvas来实现一个海报合成的功能。 首先,Vue组件是Vue.js的核心概念,它允许开发者将UI拆分成可复用的部分。在这个案例中,“vue-canvas-poster”可能...

    wxa-comp-canvas-drag-master.zip

    微信小程序canvas-drag组件是为了解决在微信小程序中对图片进行编辑的需求而设计的。这个组件基于canvas元素,提供了一种简单的方式让用户在小程序内部实现图片的拉伸、压缩和裁剪操作。通过这个组件,开发者可以...

    文字粒子效果html5-canvas-side-文字.rar

    在这个“文字粒子效果html5-canvas-side-文字.rar”压缩包中,包含的项目是一个利用Canvas API创建的文字粒子效果示例。这种效果常用于网站背景、动态头像、艺术字展示等,可以给用户带来视觉上的冲击力和趣味性。 ...

    JavaScript-Canvas-to-Blob-master

    JavaScript-Canvas-to-Blob-master 是一个开源项目,主要目的是为那些不支持HTML5 Canvas元素的`toBlob`方法的浏览器提供兼容性支持。这个库通过JavaScript实现了一个功能强大的工具,使得开发者能够在任何浏览器...

    canvas-keyframes.min.js添加序列帧动画

    canvas-keyframes.min.js添加序列帧动画,动态添加,无论是横版序列图还是竖版序列图

    html5-canvas-fireworks-celebrate.zip

    基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,...

    html-canvas-fireworks.rar

    本项目"html-canvas-fireworks.rar"就是一个利用Canvas实现的前端交互式烟花秀。用户只需在屏幕上点击,就能看到炫丽的烟花在画布上绽放,提供了独特的用户体验。 在HTML5 Canvas中,我们通过JavaScript来控制画布...

    使用新版canvas-2d接口在微信小程序中生成二维码(外部二维码)的js包

    使用新版canvas-2d接口在微信小程序中生成二维码(外部二维码)的js包

    html5-canvas-loader.rar

    这个"html5-canvas-loader.rar"文件很可能包含了一个使用HTML5 Canvas技术实现的加载器示例。让我们深入探讨HTML5 Canvas以及如何使用它来创建加载器。 HTML5 Canvas是一个基于矢量图形的画布元素,通过JavaScript ...

    canvas-nest-react.js

    见http://blog.csdn.net/carllucasyu/article/details/79022775

    html5-canvas-mouse-ink

    "html5-canvas-mouse-ink"这个项目显然与Canvas有关,特别是涉及到了鼠标交互和动画效果,这通常是用来创建某种动态视觉效果,比如跟随鼠标移动的墨迹效果。 在HTML5 Canvas中,`&lt;canvas&gt;`元素是核心,它是画布,而...

    html2canvas-0.4.1.zip

    《html2canvas:网页截屏技术的利器》 在当今的Web开发中,网页截屏功能已经成为许多应用程序不可...对于初学者和有经验的开发者来说,"html2canvas-0.4.1.zip"都是一个宝贵的资源,可以帮助我们理解并掌握这一技术。

    Node.js-canvas-nest.js一个基于html5canvas绘制的网页背景效果

    "Node.js-canvas-nest.js"是一个利用HTML5 Canvas API来生成动态背景效果的库,特别适合用于网页设计。这个项目由"hustcc"开发,并在版本b30337e中进行了更新。 Canvas是HTML5的一个重要组成部分,它提供了一个二维...

    canvas-basic-graphics.zip

    1. `main.html`:这是HTML文件,包含了`canvas`元素的定义以及对`canvas-basic-graphics.js`脚本的引用。 2. `timg (1).jpg`:可能是一张用于测试或示例的图片,可以被加载到`canvas`上进行绘制。 3. `canvas-basic-...

    html2canvas-0.4.1

    在“html2canvas-0.4.1”这个版本中,我们可以通过提供的示例和文档来深入理解其工作原理和使用方法。 首先,让我们来看看"Examples for html2canvas.html"。这个文件通常包含了一系列使用html2canvas的实际例子,...

    canvas-nest.js-master-2020429.zip

    "canvas-nest.js-master-2020429.zip"这个压缩包文件正是这样一个实例,它展示了如何利用JavaScript在Canvas画布上实现动态背景效果。下面我们将详细探讨相关的知识点。 首先,Canvas是HTML5的一个重要组成部分,它...

Global site tag (gtag.js) - Google Analytics