Pro HTML5 Programming(Second Edition)2.Canvas API（2）
1.在页面中加入canvas元素
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test02</title>
<script type="text/javascript" src="Test02.js"></script>
</head>
<body>
<!-- <div id="support"></div> -->
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
</body>
</html>
注意：上面的代码中增加了值为“diagonal”的ID特性，这样做可以方便以后通过ID来快速找到canvas元素，对于任何cnavas对象来说，ID特性都是十分重要的，因为对canvas元素的所有操作都是通过脚本代码控制的，没有ID的话，想要找到要操作的canvas元素会很难。
执行效果图如下：
2.在canvas中绘制一条对角线
Test02.js
function drawDiagonal(){
//取得canvas元素及其绘图上下文
var canvas=document.getElementById("diagonal");
var context=canvas.getContext("2d");
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70,140);
context.lineTo(140,70);
//将这条线绘制到canvas上
context.stroke();
}
window.addEventListener("load",drawDiagonal,true);
以上代码展示了使用HTML5 Canvas API的重要流程：
首先通过引用特定的canvas id值来获取对canvas对象的访问权，接着定义一个context变量，调用canvas对象的getContext方法，并且传入希望使用的canvas类型，代码清单中通过传入“2d”俩获取一个二维的上下文。
在代码中调用了三个方法：beginPath，moveTo，lineTo，传入了这条线的起点和终点。方法moveTo和lineTo实际上并不是画线，而是在结束canvas操作的时候，通过调用context.stroke（）方法完成线条的绘制。
注意：
canvas中所有的操作都是通过上下文对象来完成的，所有涉及到视觉输出效果的功能都只能通过上下文对象而不是画布对象来使用。canvas中的很多设置样式和外观的函数不会直接修改显示结果。只有当对路径应用绘制（stroke）或是填充（fill）方法时，结果才会显示出来，否则，只有在显示图像，显示文本或是绘制，填充和清除矩形框的时候，canvas才会马上更新。
Pro HTML5 Programming(Second Edition)2.Canvas API（2）的更多相关文章
- Pro HTML5 Programming(Second Edition)2.Canvas API（1）
1.在使用HTML5的Canvas元素时,考虑到有些浏览器不支持canvas元素,或是不支持HTML5 Canvas API中的某些特性,开发人员最好提供一份替代代码. 以下代码展示如何在canvas ...
- 移动端自动化测试（二）之 Appium常用的API（python）函数介绍
上一章节已经介绍了Appium的环境搭建,其实只要掌握了Appium的工作原理,前期的准备工作和安装过程是比较简单的.那么当我们搭建好Appium环境后接下来做些什么呢?通常思路是开始appium的第 ...
- JS开发HTML5游戏《神奇的六边形》（四）
近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...
- 【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘
原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...
- 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...
- 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
- HTML5 本地文件操作之FileSystemAPI整理（二）
一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
- 我这么玩Web Api（二）：数据验证，全局数据验证与单元测试
目录 一.模型状态 - ModelState 二.数据注解 - Data Annotations 三.自定义数据注解 四.全局数据验证 五.单元测试 一.模型状态 - ModelState 我理解 ...
- [Android]使用Dagger 2依赖注入 - API（翻译）
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5092525.html 使用Dagger 2依赖注入 - API ...
随机推荐
- angularjs指令参数transclude
angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...
- 【笔记】js获取当前点击元素的索引
以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...
- C#中日期记忆日期的格式化，日期格式化说明
参数format格式详细用法:格式字符 关联属性/说明 d ShortDatePattern D LongDatePattern f 完整日期和时间(长日期和短时间) F FullDateTimePa ...
- Sql Server系列：Insert语句
1 INSERT语法 [ WITH <common_table_expression> [ ,...n ] ] INSERT { [ TOP ( expression ) [ PERCEN ...
- 【转】oracle中in和exists的区别
原文地址:http://blog.itpub.net/7478833/viewspace-441043/ 感谢作者 in 和 exists区别 in 是把外表和内表作hash join,而ex ...
- Hibernate的数据删除，更改
其他未给出代码,请参考上一篇.... 一.数据的删除 方法1.从“多”的一方进行数据的删除 books.hbm.xml文件不变: <many-to-one name="publishe ...
- Android图片缓存之初识Glide
前言: 前面总结学习了图片的使用以及Lru算法,今天来学习一下比较优秀的图片缓存开源框架.技术本身就要不断的更迭,从最初的自己使用SoftReference实现自己的图片缓存,到后来做电商项目自己的实 ...
- Android自定义spinner下拉框实现的实现
一:前言 本人参考博客:http://blog.csdn.net/jdsjlzx/article/details/41316417 最近在弄一个下拉框,发现Android自带的很难实现我的功能,于是去 ...
- PopupWindow底部弹出
说明:从屏幕底部弹出PopupWindow,有弹出隐藏动画效果.背景设置透明度. 效果图如下: 1.MainActivity.java 显示popwindow,宽高跟屏幕大小一样,设置一个透明度背 ...
- Angular.js Services
Angular带来了很多类型的services.每个都会它自己不同的使用场景.我们将在本节来阐述. 首先我们必须记在心里的是所有的services都是singleton(单例)的,这也是我们所希望得到 ...