Html5 Canvas笔记(1)-CanvasAppTemplate代码
学了一段时间的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代码的更多相关文章
- Html5 Canvas笔记(2)-Canvas绘图
用Canvas API绘图,需要画图形的边线并设置内部区域填充,边线英文语法对应stroke,填充对应fill,在后面我们会频繁看到这2个英文单词的出现.Canvas API内置的形状绘图函数比较少, ...
- HTML5+学习笔记1-------边看代码边研究中
document.addEventListener('touchstart',function(){ return false; },true); touchstart当手指触摸屏幕时候触发,即使已经 ...
- html5 canvas 笔记五（合成与裁剪）
组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的 ...
- html5 canvas 笔记四（变形 Transformations）
绘制复杂图形必不可少的方法 save() 保存 canvas 状态 restore() 恢复 canvas 状态 Canvas 的状态就是当前画面应用的所有样式和变形的一个快照. Canvas 的状态 ...
- html5 canvas 笔记三（绘制文本和图片）
绘制文本 fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...
- html5 canvas 笔记二（添加样式和颜色）
色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...
- html5 canvas 笔记一（基本用法与绘制图形）
<canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...
- Html5 Canvas笔记(3)-Canvas状态
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- HTML5+学习笔记2-------边看代码边研究貌似还是有点问题...还在研究中api中
// 拍照 function getImage() { outSet( "开始拍照:" ); var cmr = plus.camera.getCamera(); cmr.capt ...
随机推荐
- JLOI2015 解题报告
JLOI2015 真的不愧是NOI出题组出的,题目难度够吊.不过每一道都是结论题和乱搞题真的很不好玩... T1:[JLOI2015]有意义的字符串 首先贴下popoqqq的blog吧 感性的认识就是 ...
- BZOJ 3401: [Usaco2009 Mar]Look Up 仰望（离线+平衡树）
刷银组刷得好开心= = 离线按权值排序，从大到小插入二叉树，查找树中比这个数大的 CODE： #include<cstdio>#include<iostream>#includ ...
- Linux less命令详解
less 在Linux下查看文件内容的命令大致有以下几种: cat 由第一行开始显示内容,并将所有内容输出 tac 从最后一行倒序显示内容,并将所有内容输出 more 根据窗口大小,一页一页的现实文件 ...
- python2.7读汉字的时候出现乱码，如何解决
我使用的是window系统,安装Anaconda,所以用的是. 1.数据形式 2.读进来乱码 3.解决办法 3.1方法1 import pandas as pd #pd.read_csv('c:/us ...
- 从SHAttered事件谈安全
大新闻? 在刚刚过去的2017年2月23日,Cryptology Group at Centrum Wiskunde & Informatica (CWI)和Google的研究人员公开了2个P ...
- 浅谈Jasmine的安装和拆卸
单元测试中,我们通常需要在执行测试代码前准备一些测试数据,建立测试场景,这些为了测试成功而所做的准备工作称为Test Fixture.而测试完毕后也需要释放运行测试所需的资源.这些铺垫工作占据的代码可 ...
- NSTimer定时器进阶——详细介绍，循环引用分析与解决
引言 定时器:A timer waits until a certain time interval has elapsed and then fires, sending a specified m ...
- Bat小试牛刀
前天版本发布后同事才发现有点小瑕疵,当然这是前期的设计和测试没到位造成的.撇开这些不说,我想说的是知识面广一点,做起事情来可能更得心应手些. 大致是这样的,由于版本的迭代,导致发布的程序只能清除一部分 ...
- 1819: [JSOI]Word Query电子字典
1819: [JSOI]Word Query电子字典 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 729 Solved: 238[Submit][S ...
- UIImagePickerController拍照/相册/录像/本地视频
1.导入系统库 #import <MobileCoreServices/MobileCoreServices.h> 2.遵守协议 <UIImagePickerControllerDe ...