学了一段时间的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. Qt中纯C++项目发布为dll的方法（超详细步骤）

    众所周知,我们可以将C++项目中的类以及某些方法导出,形成 .dll 文件,以供其他程序使用,下面将说明Qt环境下的使用方法. 首先创建共享库,步骤如下: 下一步会出现类对话框等等,不用管它,直接点击 ...

  2. WPF 多语言解决方案 - Multilingual App Toolkit

    1.首先安装Multilingual App Toolkit   2.新建项目,在VS中点击"工具" -> "Multilingual App Toolkit&qu ...

  3. Material Design学习-----SnackBar

    SnackBar是一个和Toast类似的空间,用于弹出提示作用,但是相比于Toast而已,SnackBar会有一个不错的动画效果,同时当手指完成屏幕中其他操作的时候,SnackBar会立即消失.同时可 ...

  4. mvc路由

    一.路由常规设置 1.URL模式     路由系统用一组路由来实现它的功能.这些路由共同组成了应用程序的URL架构或方案. URL的两个关键行为:     a.URL模式是保守的,因而只匹配与模式具有 ...

  5. 问题 ： lang.NoClassDefFoundError: org/springframework/core/annotation/AnnotatedElementUtils，的解决方法

    今天在做junit 测试的时候  出现了一个问题,花了一段时间 才解决. java.lang.NoClassDefFoundError: org/springframework/core/annota ...

  6. java poi 从服务器下载模板写入数据再导出

    最近写了一个,Excel 的 写入和导出.   需求是这样的.   在新建合同的时候,会有导出合同的数据,    导出的模板是固定的,,需要在模板里面写入合同的信息. first   :  下载模板 ...

  7. appium desktop 版本发布

    Appium Desktop is an open source app for Mac, Windows, and Linux which gives you the power of the Ap ...

  8. Eclipse多个console的使用

    我们在使用Eclipse开发服务器端和客户端时,经常需要同时运行服务器端和客户端,以便联调运行情况.而我之前一般有两种做法: 使用Java的命令行模式运行,但这种做法通常比较麻烦,因为要使用大串的cl ...

  9. Java系统属性与Preferences API的简单介绍

    系统属性在和Preferences API都是键值对,前者只能当前应用程序中共享数据,而后者可以在用户的各个应用或用户之间共享数据. 系统属性 Java 的系统属性决定了 Java 程序实际运行的环境 ...

  10. 通过 Composer Github Packagist制作发布共享PHP包

    参考来源: https://laravel-china.org/topics/1002 https://rivsen.github.io/post/how-to-publish-package-to- ...