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 ...
随机推荐
- iOS-应用闪退总结
一.之前上架的 App 在 iOS 9 会闪退问题(iOS系统版本更新,未配置新版本导致闪退问题) 最新更新:(2015.10.02) 开发环境: Delphi 10 Seattle OS X El ...
- 人之初，性本动 - G2 2.1 发布
前言 随着可视化进入深水区,G2面临了越来越多交互上的需求.动画是提升交互必不可少的一部分,也是之前G2的薄弱环节.这个版本里我们开发并替换了动画底层,统一了时间轴,使G2的动画性能大大提升,并提供了 ...
- Web APi之控制器创建过程及原理解析（八）
前言 中秋歇了歇,途中也时不时去看看有关创建控制器的原理以及解析,时间拖得比较长,实在是有点心有余而力不足,但又想着既然诺下了要写完原理一系列,还需有始有终.废话少说,直入主题. HttpContro ...
- 搭建AngualarJS开发环境
1.选择Web浏览器 Chrome和Firefox浏览器 2.选择代码编辑器 Subline Text和Visual Studio Code 3.安装Web服务器 3.1Apache HTTP Ser ...
- Flume NG Getting Started（Flume NG 新手入门指南）
Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...
- 《图解Spark：核心技术与案例实战》介绍及书附资源
本书中所使用到的测试数据.代码和安装包放在百度盘提供 下载 ,地址为https://pan.baidu.com/s/1o8ydtKA 密码:imaa 另外在百度盘提供本书附录 下载 ,地址为http ...
- 不要给<a>设置outline:none
outline属性有什么作用 原文链接 a{outline:none} do not do it 当用户使用tab键进行链接切换时,该属性会在当前选中的链接(获得焦点)使用该属性,一般来说是虚线框 的 ...
- Spring Boot启动流程详解（一）
环境 本文基于Spring Boot版本1.3.3, 使用了spring-boot-starter-web. 配置完成后,编写了代码如下: @SpringBootApplication public ...
- 【Android】[转] Android屏幕旋转使用OrientationEventListener的监听
说明 遇到一个奇葩的问题,我在使用onConfigChanged拦截屏幕的横竖屏旋转时,发现直接进行180度的横屏/竖屏转换居然没有反应!查找原因发现仅对landscape或者portrait状态有用 ...
- 1.羽翼sqlmap学习笔记之Access注入
使用sqlmap工具进行Acces注入:1.判断一个url是否存在注入点,根据返回数据判断数据库类型: .sqlmap.py -u "http://abcd****efg.asp?id=7& ...