`
bolinyang
  • 浏览: 76199 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

HTML5的canvas元素

html5 
阅读更多
一.概述

使用HTML5的canvas元素，我们可以在页面上绘制自己想要的图形，有点客户端编程时绘制图形的味道，比如C++的MFC中经常在屏幕上绘制图形。这个元素之前没有研究过，今天写了一段测试代码如下。

二.代码 
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	
	cxt.moveTo(10,10);
	cxt.lineTo(150,10);
	cxt.lineTo(150,50);
	cxt.lineTo(10, 50);
	cxt.lineTo(10, 10);
	
	cxt.fillStyle = "#f88";		
	cxt.fill();
	cxt.stroke();
</script>
</body>
</html>

运行结果如下
  • 大小: 3.3 KB
分享到：
| JAVA如何判断两天在同一周内
评论
3 楼 bolinyang 2013-03-01  
mylftnt 写道
上面的第10行var ccxt=c.getContext("2d");  出错了，
应该是var cxt=c.getContext("2d"); 

感觉是ITEYE的BUG,我看了一下我源代码写的是没有问题的。
2 楼 bolinyang 2013-03-01  
mylftnt 写道
上面的第10行var ccxt=c.getContext("2d");  出错了，
应该是var cxt=c.getContext("2d"); 

确实写错了，谢谢提醒哈
1 楼 mylftnt 2013-03-01  
上面的第10行var ccxt=c.getContext("2d");  出错了，
应该是var cxt=c.getContext("2d"); 
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5 canvas元素背景梦幻小星星闪烁特效

    HTML5的canvas元素是网页动态图形绘制的重要工具，它允许开发者在网页上直接进行2D图形的编程。在这个“HTML5 canvas元素背景梦幻小星星闪烁特效”中，开发者利用canvas的强大功能，创建了一种视觉效果，使网页背景...

    深入探索：使用HTML5 canvas元素创建

    HTML5 canvas元素是一个基于位图的绘图API，它允许开发者在网页上通过JavaScript编程直接绘制图形。通过结合HTML、CSS和JavaScript，开发者能够创建出丰富多彩的交互式图形应用，这些应用可以响应用户的操作，如点击...

    html5 canvas 制作流程图 EaselJS

    - 创建Stage对象并绑定到HTML5 Canvas元素。 - 创建DisplayObject实例，设置其位置、大小、颜色等属性。 - 添加DisplayObject到Stage，并调用Stage的update方法进行渲染。 通过以上知识点，我们可以使用EaselJS...

    Fabricjs是一个可以轻松处理HTML5canvas元素的框架

    Fabric.js 是一个强大的JavaScript库，专门用于操作和管理HTML5画布（canvas）元素。它为开发者提供了一个高级的交互式对象模型，使得在canvas上进行图形操作变得简单且直观。这个框架的独特之处在于，它将传统的...

    借助 HTML5 的 canvas 元素配合 JavaScript 实现的烟花动画效果

    本文将深入探讨如何利用HTML5中的canvas元素与JavaScript相结合，实现一个逼真的烟花动画效果。HTML5的canvas元素是一个基于HTML的图形绘图API，它允许开发者在网页上绘制各种图形，实现复杂的视觉效果。它广泛应用...

    Core HTML5 Canvas.pdf

    《Core HTML5 Canvas》是一本深入探讨HTML5 Canvas元素的书籍，它由经验丰富的作者精心撰写，为读者提供了大量的代码示例，以及全彩印刷和语法高亮的代码清单。这本书的目标读者是对JavaScript有中级水平理解的专业...

    resize-canvas:更改html5 canvas元素的大小而不会缩放或丢失数据-缩小到裁剪的大小

    更改html5 canvas元素的尺寸，从画布上的相对位置调整大小（默认为中心），并保留图像数据 细节 类似如何更改在Photoshop图像的分辨率，但随着精细的控制from位置。 用绝对的新尺寸或相对变化进行调整。 这个新版本...

    HTML 5 canvas 基本语法 翻译 带示例代码

    本文将深入探讨HTML5 Canvas的基本语法，包括如何创建Canvas元素、初始化绘图上下文以及如何使用2D绘图API进行图形绘制。此外，还将提供示例代码，帮助读者更好地理解和应用Canvas。 #### 创建Canvas元素 创建...

    HTML5 Canvas在线写字书法练习代码

    1. **HTML5 Canvas元素**：Canvas是HTML5新增的一个绘图元素，通过JavaScript来控制其画布上的绘图行为。它是一个矩形区域，可以在这个区域内进行像素级别的操作，如绘制线条、形状、图像等。 2. **Context对象**：...

    html5canvas播放视频

    这涉及到HTML5的Media API和Canvas API的结合使用，使得视频内容能够在Canvas元素上呈现。 首先，HTML5的`&lt;video&gt;`标签引入了在网页上嵌入视频的能力，它提供了控制视频播放、暂停、音量调整等功能。例如，创建一个...

    html2canvas(兼容截图svg元素)

    `canvg`是一个专门用来在Canvas上渲染SVG的库，它能够解析SVG文档并将其绘制到Canvas元素上。当`html2canvas`遇到SVG元素时，通过先用`canvg`将SVG渲染到Canvas，然后再让`html2canvas`处理，可以有效地解决SVG截图...

    html5 canvas时光隧道3D粒子动画特效

    HTML5 Canvas时光隧道3D粒子动画特效是一种利用HTML5 Canvas元素和JavaScript技术实现的动态视觉效果。Canvas是HTML5中的一个重要组成部分，它提供了一个在网页上绘制图形的API，允许开发者通过JavaScript来绘制和...

    HTML5.Canvas.教程

    要在HTML5页面中使用`&lt;canvas&gt;`元素，首先需要在HTML文档中插入该标签，并设置其`id`属性以便于后续的JavaScript脚本进行访问。例如： ```html &lt;canvas id="myCanvas" width="578" height="200"&gt;&lt;/canvas&gt; ``` ...

    基于HTML5 canvas的仪表盘插件

    canvas-gauges是一款专为仪表盘显示设计的JavaScript库，它充分利用了HTML5 canvas元素的功能，提供了创建高自定义度、高性能的圆形和线性仪表盘的能力。 在HTML5中，canvas元素本身只是一个画布，真正的绘图操作...

    HTML5 CanvasAPI

    在HTML页面中，使用&lt;canvas&gt;标签可以创建一块矩形区域，这块区域就是Canvas元素。默认大小是宽300像素、高150像素，但用户可以自定义大小。在页面中加入了canvas元素之后，通过JavaScript可以对Canvas进行控制。...

    7款酷炫HTML5+Canvas全屏网页背景动画特效

    同时，HTML5 Canvas元素允许开发者直接在画布上绘制图形，实现了高性能的实时渲染，使得动态效果流畅而自然。 2. **HTML5 Canvas基础** HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript进行操作。它提供了...

    HTML5 Canvas模糊粒子背景特效.zip

    HTML5 Canvas模糊粒子背景特效是一种基于JavaScript和HTML5 Canvas元素创建的动态视觉效果。Canvas是HTML5中的一个重要特性，它允许开发者在网页上绘制图形，包括动态图像和交互式动画，而无需依赖任何插件。这个...

    Html5 Canvas绘制圆形仪表盘动画特效源码.zip

    在众多HTML5的新特性中，Canvas元素是一个非常重要的亮点，它为网页中动态绘制图形提供了可能。通过Canvas，开发者可以绘制各种图形，比如线条、矩形、圆形等，甚至还可以绘制图像和动画。 标题中提到的“Html5 ...

Magicbox
Global site tag (gtag.js) - Google Analytics