html5-Html5 canvas 基础demo 为什么都没有

问题描述

Html5 canvas 基础demo 为什么都没有
 <!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

</head>
<body>
<canvas id="myCanvas" width="320" height="220"></canvas>
</body>
</html>

解决方案

代码放到canvas下面,放前面找不到对象了

 <canvas id="myCanvas" width="320" height="220"></canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

解决方案二:

是在支持html5的浏览器上运行的么?ie9以前的浏览器都是不支持的。

解决方案三:

不懂你的意思;这是Html5 canvas 基础demo :可以参考一下http://blog.csdn.net/qq_19558705/article/details/50519952

解决方案四:

你觉得你的代码没有问题?为什么会出现这种情况?你的问题得从浏览器解析HTML入手,代码是从上而下的执行方式,你把js代码放在了canvas之前,此时js调用myCanvas这个对象时就会找不到它。
解决方法 1.你可以选择代码放在放在body中且放最后比较推荐此种方法 2.你把script标签中的代码一个构造函数中比如
function draw(){ 代码 },最后写个window.onload=function(){draw()},这句话意思是当文档加载完成之后才会执行这个函数。好了以上是我给你的两种解决方法。有什么不理解的欢迎提问

时间: 2024-10-26 11:37:54

html5-Html5 canvas 基础demo 为什么都没有的相关文章

10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演

  下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技术,完全不需要借助 Flash 或 Silverlight 之类的插件.这种技术门槛的降低必将给这些技术的普及繁荣创造不可或缺的前提保障. (提示:用谷歌浏览器效果最佳) 01. 风好大,吹乱我的发 这是我最喜欢的一样演示,因为里面有一个很可爱的小女孩,似乎是有了人气就更能让人动心.如果你也喜欢

html5之Canvas坐标变换应用-时钟实例

在上一篇中我们了解html5的Canvas ,在这一篇中不用多说,写一个html5的时钟应用程序试手.在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate),以及html5 Canvas的路径绘图,beginPath,closePath,rect,arc等,还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制,save,restore.    多的也不说了,直接上代码,有不解的欢迎提问,以及对我的建议指教都可以,. ff下效果图: 代码: <html>

用html5的canvas画时钟的问题

问题描述 用html5的canvas画时钟的问题 问题1: //初始化画布 context.save(); context.clearRect(00canvas.widthcanvas.height); context.translate(canvas.width/2canvas.height/2); context.scale(0.90.9); context.rotate(-Math.PI/2); context.save(); 初始化的时候加一句 context.rotate(-Math.

html5使用canvas绘制时钟示例

准备工作 在HTML中指定一个区域放置时钟: <div id="clock" style="position: relative;"></div> 时钟的一些外观设定: var width = 260; // 桌布宽度 var height= 260; // 桌布高度 var dot = {     x : width / 2,     y : height / 2,     radius : 6 }; // 圆点位置.半径 var radi

HTML5下canvas 制作绚丽钟表例子

html5之canvas的标签的使用,废话不多说,直接上代码: html部分: <body>  <canvas   id="canvas">   浏览器不支持CANVAS  </canvas> </body> 不用怀疑,就是这么简单,在html里面,好玩的在js里面 第一个辅助代码部分,仅仅只是标注0-9 十个数字和一个":"号,这样,一个电子钟表的所有元素都有了: digit =     [         [   

javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码_javascript技巧

本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果.分享给大家供大家参考.具体如下: 下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5.个人还是比较推荐chrome,这个效果在Firefox下也会稍卡. 效果图: 演示地址:http://demo.jb51.net/js/2015/js-flower-canvas.html 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

《HTML5+JavaScript动画基础》——2.3 用代码实现动画

2.3 用代码实现动画 在准备好HTML5文件的基本结构之后,我们已经了解了足够多的基础知识,可以开始编码了.我们需要一个文本编辑器用来输入示例代码以及一个支持HTML5的Web浏览器运行这些示例.同时我们需要熟悉该浏览器内置的开发者控制台.在准备好这些工具后(它们很可能已经在你的电脑上)我们就可以出发了,让我们深入学习一些动画吧. 2.3.1 动画循环几乎所有的程序动画都会表现为某种形式的循环.我们会创建一个展现一系列图像的流程图以实现逐帧动画,其中每一帧只需要绘制出来即可,如图2-2所示.

html5中canvas的一个简单的例子

买了两本关于HTML5的书,一本<HTML5揭秘>,一本<HTML5高级程序设计>,现在在看<html5揭秘>网上说这本书是非常入门的一本,<HTML5权威指南>就相对深一点.所以买了揭秘,没买指南.都说HTML5的canvas很重要,所以这里把书上关于canvas的一些简单例子,给试着自己写了一遍,放上来把  代码如下 复制代码 window.onload = function(){     var canvas = document.getElement

用html5的canvas画布绘制贝塞尔曲线完整代码

  html5的canvas很强大利用其画布可轻松绘制贝塞尔曲线,为大家以后使用方便,特于此分享实现代码,有此需求的朋友可以参考下 代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w