MyException - 我的异常网
当前位置:我的异常网» HTML5 » HTML5 Canvas:初步Canvas

HTML5 Canvas:初步Canvas

www.MyException.Cn  网友分享于:2013-10-08  浏览:0次
HTML5 Canvas:初始Canvas

Canvas HTML 5中引入它,可以做很多事情:画图、动画、游戏开发等等。

 

Canvas 元素

Canvas 中文翻译为:画布。

 

<canvas id=”yourCanvasId” width=”300” height=”150” />

Canvas元素除了公用属性外,只有两个额外的属性:width, height,他们都是没有单位的,其实单位是px,但是不能写单位。如果不指定这两个属性,默认是width300height150

众所周知,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/

文章评论

总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员的鄙视链
程序员的鄙视链
程序员必看的十大电影
程序员必看的十大电影
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
漫画:程序员的工作
漫画:程序员的工作
鲜为人知的编程真相
鲜为人知的编程真相
为什么程序员都是夜猫子
为什么程序员都是夜猫子
Java程序员必看电影
Java程序员必看电影
中美印日四国程序员比较
中美印日四国程序员比较
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
老程序员的下场
老程序员的下场
一个程序员的时间管理
一个程序员的时间管理
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
编程语言是女人
编程语言是女人
 程序员的样子
程序员的样子
程序员应该关注的一些事儿
程序员应该关注的一些事儿
如何成为一名黑客
如何成为一名黑客
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
那些争议最大的编程观点
那些争议最大的编程观点
代码女神横空出世
代码女神横空出世
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
我是如何打败拖延症的
我是如何打败拖延症的
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
旅行,写作,编程
旅行,写作,编程
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员和编码员之间的区别
程序员和编码员之间的区别
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
10个调试和排错的小建议
10个调试和排错的小建议
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
每天工作4小时的程序员
每天工作4小时的程序员
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有