下面的例子展示了如何利用Canvas画图。可以在FF和Chrome等浏览器下查看。
<!DOCTYPE html>
<html>
<head>
<title>
Canvas Example
</title>
<script type="text/javascript">
function loader()
{
var canvas = document.getElementById
('canvas');
var canvas1 = canvas.getContext('2d');
// Rectangles
canvas1.fillStyle = "rgba(0, 0, 200, 1)";
canvas1.fillRect(30, 30, 75, 70);
canvas1.fillStyle = "rgba(200, 200, 0, 1)";
canvas1.fillRect(70, 50, 55, 70);
canvas1.fillStyle = "rgba(200, 0, 0, 1)";
canvas1.fillRect(90, 50, 75, 50);
// Stroked triangles
canvas1.beginPath();
canvas1.strokeStyle = "rgba(200, 0, 0, 0.5)";
canvas1.moveTo(110, 205);
canvas1.lineTo(110, 125);
canvas1.lineTo(30, 205);
canvas1.closePath();
canvas1.stroke();
canvas1.beginPath();
canvas1.moveTo(100, 205);
canvas1.lineTo(100, 125);
canvas1.lineTo(20, 205);
canvas1.closePath();
canvas1.stroke();
canvas1.beginPath();
canvas1.moveTo(90, 205);
canvas1.lineTo(90, 125);
canvas1.lineTo(10, 205);
canvas1.closePath();
canvas1.stroke();
//Filled triangle
canvas1.fillStyle = "rgba(0, 200, 0, 0.5)";
canvas1.beginPath();
canvas1.moveTo(225, 25);
canvas1.lineTo(305, 25);
canvas1.lineTo(225, 105);
canvas1.closePath();
canvas1.fill();
// Heart
canvas1.fillStyle = "rgba(200, 0, 0, 0.5)";
canvas1.beginPath();
canvas1.moveTo(75, 250);
canvas1.bezierCurveTo(75, 247, 70, 235, 50, 235);
canvas1.bezierCurveTo(20, 235, 20, 272.5, 20, 272);
canvas1.bezierCurveTo(20, 290, 40, 312, 75, 330);
canvas1.bezierCurveTo(110, 312, 130, 290, 130, 272);
canvas1.bezierCurveTo(130, 272.5, 130, 235, 100, 235);
canvas1.bezierCurveTo(85, 235, 75, 247, 75, 250);
canvas1.closePath();
canvas1.fill();
//Quadratic curves
canvas1.strokeStyle = "rgba(0, 0, 0, 1)";
canvas1.beginPath();
canvas1.moveTo(275, 125);
canvas1.quadraticCurveTo(225, 125, 225, 162);
canvas1.quadraticCurveTo(260, 200, 265, 200);
canvas1.quadraticCurveTo(325, 200, 325, 162);
canvas1.quadraticCurveTo(325, 125, 275, 125);
canvas1.closePath();
canvas1.stroke();
// Arcs
canvas1.beginPath();
canvas1.arc(275, 275, 50, 0, Math.PI * 2, true);
canvas1.moveTo(310, 275);
canvas1.arc(275, 275, 35, 0, 0.75 * Math.PI, false);
canvas1.moveTo(300, 255);
canvas1.arc(265, 255, 35, 0, 0.5 * Math.PI, false);
canvas1.moveTo(280, 255);
canvas1.arc(245, 255, 35, 0, 0.2 * Math.PI, false);
canvas1.closePath();
canvas1.stroke();
canvas1.font = 'italic 40px sans-serif';
canvas1.strokeText("Hello!", 50, 400);
}
</script>
</head>
<body onload="loader()">
<h1>Canvas Example</h1>
<canvas id="canvas" width="600"
height="500">
</canvas>
</body>
</html>
源码下载：
http://www.ctdisk.com/file/2022154
分享到：
相关推荐
《开源的HTML5 Canvas画图插件 - Literally Canvas详解》 HTML5的Canvas元素为网页带来了强大的图形绘制能力，而Literally Canvas则是一个优秀的基于Canvas的开源画图插件，它提供了一套完整的画图工具，使得用户...
在这个项目中，`index.html` 应该包含一个 `<canvas>` 元素，它是整个画图板的基石。例如： ```html <!DOCTYPE html> <html lang="zh"> <title>Canvas 画图板 <canvas id="drawCanvas"></canvas> ...
在这个主题下，我们将深入探讨HTML5 Canvas的基本概念、主要特性以及如何利用它来实现各种画图功能。 首先，HTML5 Canvas的使用始于在HTML文档中插入一个`<canvas>`标签。这个标签就像一块画布，可以通过JavaScript...
这个动态画图程序充分利用了Canvas API的功能，提供了直线、圆和矩形三种基本图形的绘制选项，并支持用户自定义颜色，为学习和理解HTML5 Canvas提供了一个直观的实例。 首先，Canvas是HTML5中一个非常重要的元素，...
在这个“基于html5 canvas实现的动态文字特效代码”项目中，我们将探讨如何利用Canvas API来创建引人注目的文字动画效果。 Canvas API提供了一系列方法，如`fillText()`和`strokeText()`，用于在画布上绘制文本，而...
利用context.drawImage(canvasImg,copyStartPosX,copyStartPosY,copyImgWidth,copyImgHeight,canvasStartPosX,canvasStartPosY,canvasImgWidth,canvasImgHeight);实时画图呈现手电筒效果
"HTML5 Canvas实现web画图之自由画笔"这一主题，主要关注的是如何利用Canvas API创建一个可以在web端和手机端都能使用的自由画笔功能。 首先，Canvas是一个基于矢量图形的元素，它本身并不包含任何绘制功能，而是...
这个"可定义笔刷和画布的HTML5 Canvas画板画图工具"利用了Canvas API来创建一个互动的画布，用户可以在这个画布上进行绘画，选择不同的笔刷样式和颜色，实现丰富的创作功能。 1. **HTML5 Canvas基本概念**：Canvas...
并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功能，在...
在本文中，作者利用Canvas实现了一个类似Windows画图板的应用，包含了铅笔、图章仿制、直线、圆、矩形、橡皮擦、背景图、取色板和文字插入等功能，充分展示了Canvas的强大潜力。 在实现这个画图板的过程中，作者还...
在这个主题中，我们将深入探讨“在线画图canvas”以及如何结合HTML5和JavaScript实现这一功能。 首先，Canvas是一个HTML标签，它的基本结构是在HTML文件中插入`<canvas>`元素。例如： ```html <canvas id=...
在这个“HTML5 Canvas粒子流动爱心形状动画特效”中，我们主要探讨的是如何利用Canvas API来构建粒子系统，并实现动态的、流动的爱心形状动画。 首先，Canvas API是HTML5引入的一个特性，它提供了一个2D渲染上下文...
Canvas是HTML5中的一个核心元素，允许开发者在网页上动态绘制2D图像，为Web开发提供了强大的图形处理能力。这个源码项目是学习和进阶HTML5技术的好材料，特别是对于希望掌握Canvas API和实现交互式图形应用的开发者...
Canvas是HTML5中引入的一个强大的绘图工具，它允许开发者在网页上进行动态图形绘制，提供了丰富的API来创建复杂的2D图像。"Canvas画图经典全面Demo"是一个深入学习和实践Canvas技术的资源集合，涵盖了Canvas绘图的多...
本书名为“HTML5 Canvas核心技术”，专门针对对HTML5 Canvas画图功能感兴趣的读者，特别是已经掌握基础的html、css和JavaScript知识的开发者。本书将深入浅出地介绍Canvas的核心技术，帮助读者快速上手并精通Canvas...
在JavaScript中，我们可以利用Canvas API来实现各种复杂的图形操作，包括鼠标画图和线程画线。本教程将深入探讨如何使用Canvas进行这些功能。 首先，创建一个Canvas元素非常简单，只需在HTML中添加一个`<canvas>`...
本文将详细介绍一款名为Painter的开源项目，它是一款基于HTML5 Canvas的画图程序，能够帮助用户在浏览器中实现绘画创作。 一、HTML5 Canvas：绘图的基础 HTML5 Canvas是一个二维绘图API，通过JavaScript语言控制，...
在本文中，作者详细阐述了如何利用Canvas实现类似Windows画图板的各项功能。例如，使用Canvas可以轻松实现铅笔绘图，模拟真实的笔触；通过坐标定位和线性函数，可以绘制直线和曲线；使用圆形和矩形的绘制方法，可以...
在这个场景中，我们将关注HTML5如何读取XML数据，并利用这些数据在Canvas上进行绘图。 首先，让我们了解HTML5中的XMLHttpRequest对象。这是一个异步通信接口，允许JavaScript在不刷新整个页面的情况下与服务器交换...
本篇文章将详细探讨如何在微信小程序中利用Canvas实现画图功能。 首先，我们需要在页面的JSON配置文件（如`page/index/index.json`）中声明Canvas组件： ```json { "component": true, "usingComponents": {}, ...