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是Leaflet的一个扩展,它引入了一种新的标记类型,即使用HTML5 Canvas元素来创建地图标记。与传统的SVG或图像标记相比,Canvas标记的优势在于其渲染性能。由于Canvas是在内存中绘制图形,因此...
html2canvas-1.0.0-rc.4版本
标题中的"html2canvas-rc4.js和html2canvas.min.js"指的是HTML2canvas的两个不同版本。"rc4"通常代表Release Candidate 4,这是软件发布前的一个测试版本,而".min.js"则意味着这是一个经过压缩和优化的版本,适合在...
在这个“vue-canvas-poster”项目中,我们将探讨如何结合Vue和Canvas来实现一个海报合成的功能。 首先,Vue组件是Vue.js的核心概念,它允许开发者将UI拆分成可复用的部分。在这个案例中,“vue-canvas-poster”可能...
微信小程序canvas-drag组件是为了解决在微信小程序中对图片进行编辑的需求而设计的。这个组件基于canvas元素,提供了一种简单的方式让用户在小程序内部实现图片的拉伸、压缩和裁剪操作。通过这个组件,开发者可以...
在这个“文字粒子效果html5-canvas-side-文字.rar”压缩包中,包含的项目是一个利用Canvas API创建的文字粒子效果示例。这种效果常用于网站背景、动态头像、艺术字展示等,可以给用户带来视觉上的冲击力和趣味性。 ...
JavaScript-Canvas-to-Blob-master 是一个开源项目,主要目的是为那些不支持HTML5 Canvas元素的`toBlob`方法的浏览器提供兼容性支持。这个库通过JavaScript实现了一个功能强大的工具,使得开发者能够在任何浏览器...
canvas-keyframes.min.js添加序列帧动画,动态添加,无论是横版序列图还是竖版序列图
基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,...
本项目"html-canvas-fireworks.rar"就是一个利用Canvas实现的前端交互式烟花秀。用户只需在屏幕上点击,就能看到炫丽的烟花在画布上绽放,提供了独特的用户体验。 在HTML5 Canvas中,我们通过JavaScript来控制画布...
使用新版canvas-2d接口在微信小程序中生成二维码(外部二维码)的js包
这个"html5-canvas-loader.rar"文件很可能包含了一个使用HTML5 Canvas技术实现的加载器示例。让我们深入探讨HTML5 Canvas以及如何使用它来创建加载器。 HTML5 Canvas是一个基于矢量图形的画布元素,通过JavaScript ...
见http://blog.csdn.net/carllucasyu/article/details/79022775
"html5-canvas-mouse-ink"这个项目显然与Canvas有关,特别是涉及到了鼠标交互和动画效果,这通常是用来创建某种动态视觉效果,比如跟随鼠标移动的墨迹效果。 在HTML5 Canvas中,`<canvas>`元素是核心,它是画布,而...
《html2canvas:网页截屏技术的利器》 在当今的Web开发中,网页截屏功能已经成为许多应用程序不可...对于初学者和有经验的开发者来说,"html2canvas-0.4.1.zip"都是一个宝贵的资源,可以帮助我们理解并掌握这一技术。
"Node.js-canvas-nest.js"是一个利用HTML5 Canvas API来生成动态背景效果的库,特别适合用于网页设计。这个项目由"hustcc"开发,并在版本b30337e中进行了更新。 Canvas是HTML5的一个重要组成部分,它提供了一个二维...
1. `main.html`:这是HTML文件,包含了`canvas`元素的定义以及对`canvas-basic-graphics.js`脚本的引用。 2. `timg (1).jpg`:可能是一张用于测试或示例的图片,可以被加载到`canvas`上进行绘制。 3. `canvas-basic-...
在“html2canvas-0.4.1”这个版本中,我们可以通过提供的示例和文档来深入理解其工作原理和使用方法。 首先,让我们来看看"Examples for html2canvas.html"。这个文件通常包含了一系列使用html2canvas的实际例子,...
"canvas-nest.js-master-2020429.zip"这个压缩包文件正是这样一个实例,它展示了如何利用JavaScript在Canvas画布上实现动态背景效果。下面我们将详细探讨相关的知识点。 首先,Canvas是HTML5的一个重要组成部分,它...