学了一段时间的Html5 Canvas，现想一段一段的将学习笔记整理出来放上来，先整理一段Canvas的模版文件代码，以后建立Canvas程序就不用重新写这些代码了，当然最好是将这个Html代码保存到开发环境模板里，这样以后操作简便很多。使用模版时，只需要修改函数drawScreen()的代码即可，后续我的笔记也只在写出此函数的代码。

注：模版中需要说明一点的是，特别注意Canvas元素的高宽是通过自身的Width、Height属性来指定，切忌通过Css来控制Canvas其高宽，由此可能导致最终的画面被缩放、线条出现锯齿等状况。

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Canvas Application</title>

 <script type="text/javascript">

     window.addEventListener("load",eventWindowLoaded,false);

     function eventWindowLoaded(){

         canvasApp();

     }

     function canvasApp(){

         var theCanvas=document.getElementById("canvas_one");

         if(!theCanvas||!theCanvas.getContext){return;}

         var context=theCanvas.getContext("2d");

         function drawScreen(){

             context.fillStyle="#FF0000";

             context.fillRect(0,0,150,75);

         }

         drawScreen();

     }

 </script>

 </head>

 <body>

     <div style="position:absolute;top:50px;left:50px;">

         <canvas id="canvas_one" width="500" height="300">

         浏览器不支持Html5 Canvas

         </canvas>

     </div>

 </body>

 </html>

Html5 Canvas笔记(1)-CanvasAppTemplate代码的更多相关文章

  1. Html5 Canvas笔记(2)-Canvas绘图

    用Canvas API绘图,需要画图形的边线并设置内部区域填充,边线英文语法对应stroke,填充对应fill,在后面我们会频繁看到这2个英文单词的出现.Canvas API内置的形状绘图函数比较少, ...

  2. HTML5+学习笔记1-------边看代码边研究中

    document.addEventListener('touchstart',function(){ return false; },true); touchstart当手指触摸屏幕时候触发,即使已经 ...

  3. html5 canvas 笔记五（合成与裁剪）

    组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的 ...

  4. html5 canvas 笔记四（变形 Transformations）

    绘制复杂图形必不可少的方法 save() 保存 canvas 状态 restore() 恢复 canvas 状态 Canvas 的状态就是当前画面应用的所有样式和变形的一个快照. Canvas 的状态 ...

  5. html5 canvas 笔记三（绘制文本和图片）

    绘制文本 fillText(text, x, y [, maxWidth])   在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...

  6. html5 canvas 笔记二（添加样式和颜色）

    色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...

  7. html5 canvas 笔记一（基本用法与绘制图形）

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...

  8. Html5 Canvas笔记(3)-Canvas状态

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  9. HTML5+学习笔记2-------边看代码边研究貌似还是有点问题...还在研究中api中

    // 拍照 function getImage() { outSet( "开始拍照:" ); var cmr = plus.camera.getCamera(); cmr.capt ...

随机推荐

  1. Oracle RAC学习笔记02-RAC维护工具集

    Oracle RAC学习笔记02-RAC维护工具集 RAC维护工具集 1.节点层 2.网络层 3.集群层 4.应用层 本文实验环境: 10.2.0.5 Clusterware + RAC 11.2.0 ...

  2. 华硕ASUS笔记本 中间5个指示灯分别表示什么

    1.图案像个灯的叫电源状态指示灯:当笔记本电脑启动时,电源状态指示灯便会亮起来并会在笔记本电脑进入休眠模式(Sleep Mode,Suspend-to-RAM)时缓慢闪烁.当笔记本电脑关机或进入休眠模 ...

  3. BZOJ1115:[POI2009]石子游戏Kam (博弈论)

    挺水的 听说是阶梯nim和，就去看了一下，然后就会了= = 观察题目，发现拿第i堆棋子k个造成的影响就是第i+1堆棋子能多拿k个 可以把模型转化为，有n堆石子，每次从某一堆拿一个石子，放在下一堆中，不 ...

  4. java后端学习流程

    首先,我个人比较推崇的学习方法是:先学java前段,也就是HTML,css,js,因为学习java以后肯定是往java ee方向发展的,学习完前端,在学习后端很多东西比计较容易理解! 其中J2SE是关 ...

  5. 关于Monkey的一切都在这里

    关于Monkey的一切都在这里 版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 允许有条件转载,转载请附带底部二维码. 一.什么是Monkey Monkey是 ...

  6. Java虚拟机学习 - 体系结构 内存模型（1）

    一:Java技术体系模块图 二:JVM内存区域模型 1.方法区 也称"永久代" ."非堆",  它用于存储虚拟机加载的类信息.常量.静态变量.是各个线程共享的内 ...

  7. iOS回顾笔记（ 01 ）

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  8. n的阶乘

    涉及阶乘的都会产生大的数据,此时要变成long或者实在很大要使用BigInteger 题目描述 输入一个整数n,输出n的阶乘 输入描述: 一个整数n(1<=n<=20) 输出描述: n的阶 ...

  9. Ajax页面的加载数据与删除

    1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...

  10. 关于label和input对齐的那些是秦

    input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...