学了一段时间的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. 各种ORM框架对比（理论篇，欢迎来观摩）

    各种ORM框架对比 目前框架有以下 PetaPoco Dapper.NET Massive Simple.Data Chain PetaPoco 轻量级,以前单文件,目前有维护形成项目级别,适合多个数 ...

  2. 使用splice实现高效的代理服务器

    很多网络应用场景下, 当原设备与目标设备无法直接建立连接时,这时就需要一台代理服务器进行中转.代理服务器只需要将来自源设备的报文 原封不动的转发给目标设备,而并不需要知道报文的具体内容.在这种情况下, ...

  3. VS2015在Windows 10 下面安装经验

    实体机环境:Windows 10 专业版(2017年2月28日 官方下载版本) VS2015:cn_visual_studio_enterprise_2015_with_update_3_x86_x6 ...

  4. C#基础——类

    第一部分:String类 系统内置的处理字符串类型的函数方法类.方便我们对字符串类型进行一系列的处理. +++++String类+++++黑色小扳手 - 属性紫色立方体 - 方法 1.***字符串.L ...

  5. [LeetCode] Is Subsequence 题解

    前言 这道题的实现方法有很多,包括dp,贪心算法,二分搜索,普通实现等等. 题目 Given a string s and a string t, check if s is subsequence ...

  6. 好公司、行业、领导？应届生应根据什么选offer？

    两个年轻人大学毕业了,一个去了收入更高的大企业工作,一个去了收入较低的小作坊式工厂工作.你们说他们谁的青春时光最能升值呢?表面上看应该是大企业,可是大企业是做马车制造的,小作坊是做汽车的.现在人们都知 ...

  7. homebrew常用命令

    安装 ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/Go/install)" 搜索 brew sea ...

  8. ASP从HTML标签中提取中文

    Function delHtml(strHtml) '做了一个函数名叫delhtml Dim objRegExp, strOutput Set objRegExp = New Regexp ' 建立正 ...

  9. JS邮箱验证-正则验证

    <form act="">输入:<input type="text" name="qc" id="qc" ...

  10. mybatis基础，mybatis配置文件核心组件typeHandler元素

    无论是从预处理语句中设置一个值,还是从结果集里取出一个值,都会用类型处理器将获取的值以合适的方式转换成 Java 类型 可以重写类型处理器或创建你自己的类型处理器来处理不支持的或非标准的类型 实现 o ...