HTML5 Canvas:初始Canvas
Canvas ,HTML 5中引入它,可以做很多事情:画图、动画、游戏开发等等。
Canvas 元素
Canvas 中文翻译为:画布。
<canvas id=”yourCanvasId” width=”300” height=”150” />
Canvas元素除了公用属性外,只有两个额外的属性:width, height,他们都是没有单位的,其实单位是px,但是不能写单位。如果不指定这两个属性,默认是width为300,height为150。
众所周知,html元素的样式,都可以用css样式来指定。Canvas也不例外。
<html>
<head>
<title>Canvas - 01</title>
<style>
body{
background:#dddddd;
} #canvas{
margin:20px;
padding:20px;
background:#ffffff;
border:thin inset #aaaaaa;
width:600px;
height:300px;
}
</style>
</head>
<body>
<canvas id="canvas">
Canvas not supported
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"); ctx.font='38pt Arial';
ctx.fillStyle='cornflowerblue';
ctx.strokeStyle='blue';
ctx.fillText("Hello Canvas", canvas.width/2 -150, canvas.height/2 + 15);
ctx.strokeText("Hello Canvas stroke", canvas.width/2 -200, canvas.height/2 + 80);
</script>
</body>
</html>
我们期望的结果是这样的:
而实际的执行结果:
从执行结果看,它确实一个放大的hello,这是为什么呢?
其实我认为可以这样理解它,它是一个放映布,因为真正的绘图不在它上的,而是在一个绘图板上,绘图完毕投影到放映布上。这一点,类似于我们中学时候用过的幻灯片放映机,在一张玻璃板(绘图板)上写上习题,然后投影到放映布或者白墙上(画布)。
所以呢,这样一想,就明白了,当css样式中的width,height属性值与canvas元素的width,height的属性值不同时,会自动的将绘图板上的内容进行缩放到画布上。
Canvas 元素目前有三个方法:
通过getContext(“2d”);能够取得CanvasRenderingContext2D对象,然后就可以基于此上下文对象来作2d图了
通过getContext(“3d”);就可以进行3d作图,3d作图底层用的是WebGL。
在随后的文章里,将会学习使用Canvas画图的必要知识。
CanvasRenderingContext2D API 详情:
http://www.w3school.com.cn/jsref/dom_obj_canvasrenderingcontext2d.asp
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
http://www.w3school.com.cn/tags/html_ref_canvas.asp
http://www.html5canvastutorials.com/tutorials/html5-canvas-line-joins/
高级教程:
包括event, arrow等理论基础 :http://www.dbp-consulting.com/tutorials/canvas/
HTML5 Canvas:初始Canvas的更多相关文章
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- HTML5中的 Canvas
什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...
- HTML5中的canvas基本概念及绘图
* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- HTML5学习(四)---Canvas绘图
参考教程地址:http://www.w3school.com.cn/html5/html_5_canvas.asp canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 c ...
- [html5] 学习笔记-Canvas应用
通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...
- [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形
在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...
- [html5] 学习笔记-Canvas标签的使用
Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...
随机推荐
- [转载] 多图详解Spring框架的设计理念与设计模式
转载自http://developer.51cto.com/art/201006/205212_all.htm Spring作为现在最优秀的框架之一,已被广泛的使用,51CTO也曾经针对Spring框 ...
- JavaWeb框架SSH_Struts2_(二)
1. Struts2的核心配置(详解) 本章内容目录: 配置struts.xml文件 struts.xml文件 常量配置 包配置 包含配置 Action配置 实现Action控制类 配置Action ...
- 开源巨献:Google最热门60款开源项目
文章整理于互联网.本文收集了 60款 Google 开源的项目,排名顺序按照 Github ★Star 数量排列. 0.机器学习系统 TensorFlow ★Star 62533 TensorFlo ...
- Python 面向对象(四) 反射及其魔术方法
反射 reflection 也有人称之为自省 作用: 运行时获取.添加对象的类型定义信息,包括类 内建方法: getattr(object, name[, default]) 返回object对象 ...
- Anaconda+linux +opencv+dlib安装
准备文件Anaconda: https://www.anaconda.com/download/ 我下载的时最新的 64-Bit (x86) Installer (524 MB) 然后在下载的anac ...
- 基于FPGA的有限状态机浅析
前言:状态机大法好,状态机几乎可以实现一切时序逻辑电路. 有限状态机(Finite State Machine, FSM),根据状态机的输出是否与输入有关,可分为Moore型状态机和Mealy型状态机 ...
- lumen 中间件详解
我来给大家,讲解一下lumen中的中间件,高手勿喷. 首先,我们看下lumen中文档中的写法,我这里看的是5.3中文文档.https://lumen.laravel-china.org/docs/5. ...
- “战术竞技类”外挂打击已开始!揭秘腾讯We Test游戏安全服务新动作!
商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/353.html We Test导读 国服PUBG的游戏安全将由我 ...
- LINQ学习系列-----2.1 一个Linq语句
Linq语句介绍 先上源码: 上述代码涵盖了Linq新特性: 代码解析: 针对本文中的几点特性,前面有文章进行阐述.
- 超级有用的Vim命令
你是否曾经烦恼,每次编辑vim文件,想要跳到一行结尾,需要按多次右键,每次想找到某个字符的位置,都得用肉眼去观察,每次想跳到文件结尾,都要按多次向下键.现在,你不必担心这些繁杂的过程,因为我们完全可以 ...