`
bolinyang
  • 浏览: 74351 次
  • 性别: 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"); 
发表评论

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

相关推荐

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