仅仅只是一个简单的hello world.

js代码很简单:

  1. <!DOCTYPE HTML>
  2. <html lang="cn">
  3. <head>
  4. <title> canvas1 </title>
  5. <meta charset="UTF-8">
  1. //@author 杨虹昌
  2. <script type="text/javascript">
  3. //测试浏览器是否支持canvas
  4. function canvasSupport(){
  5. return   !!document.createElement('canvas').getContext;
  6. }
  7. //添加window事件,文档加载完成之后执行此函数
  8. window.addEventListener('load',eventWindowLoaded,false);
  9. //输出日志信息对象简单封装
  10. var Debugger=function(){};
  11. Debugger.log=function(message){
  12. try{
  13. console.log(message);
  14. }catch(e){
  15. return;
  16. }
  17. }
  18. //窗体加载后执行函数
  19. function eventWindowLoaded(){
  20. canvasApp();
  21. }
  22. //
  23. function canvasApp(){
  24. if(!canvasSupport()){
  25. return;
  26. }
  27. //获取html元素id为theCanvas的画布元素
  28. var theCanvas=document.getElementById('theCanvas');
  29. //获得2D上下文,注意:此处2d只能是小写,大写则为undefined,很郁闷为何不做静态常量,也许是我不知道吧
  30. var context=theCanvas.getContext('2d');
  31. //输出信息
  32. Debugger.log('Drawing Canvas');
  33. //画对应类容
  34. function drawScreen(){
  35. //background  设置背景颜色
  36. context.fillStyle="#ffffaa";
  37. context.fillRect(0,0,500,300);
  38. //font     设置字体
  39. context.fillStyle="#000000";
  40. context.font="20px_sans";
  41. context.textBaseline="top";
  42. context.fillText("Hello World",195,80);
  43. //image   加载一张图片并输出到画布
  44. var helloWorldImage=new Image();
  45. helloWorldImage.src="http://avatar.csdn.net/0/E/9/1_yhc13429826359.jpg";
  46. helloWorldImage.onload=function(){
  47. context.drawImage(helloWorldImage,160,130);
  48. };
  49. //border 边框设置
  50. context.strokeStyle="#000000";
  51. context.strokeRect(5,5,490,290);
  52. }
  53. drawScreen();
  54. }
  55. </script>
  56. </head>
  57. <body>
  58. <div style="position:absolute;top:50px;left:50px;">
  59. <canvas id="theCanvas" width="500" height="500">
  60. 浏览器不支持html5 canvas,建议使用chrome,FF
  61. </canvas>
  62. </body>
  63. </html>

最终效果图:

只是一个最简单的例子,后续会详细解释.

HTML5 Canvas 初探的更多相关文章

  1. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  2. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  3. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  4. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  5. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  6. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  7. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  8. canvas初探2

    2.2 canvas的绘图环境 canvas仅仅只是一个绘图的容器,其内存在一个绘图环境,该环境对象提供了全部的绘图功能. 目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的 ...

  9. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

随机推荐

  1. [吴恩达机器学习笔记]12支持向量机1从逻辑回归到SVM/SVM的损失函数

    12.支持向量机 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考资料 斯坦福大学 2014 机器学习教程中文笔记 by 黄海广 12.1 SVM损失函数 从逻辑回归到支持向量机 为了描述 ...

  2. 2-sat Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) D

    http://codeforces.com/contest/782/problem/D 题意: 每个队有两种队名,问有没有满足以下两个条件的命名方法: ①任意两个队的名字不相同. ②若某个队 A 选用 ...

  3. HDU 4496 并查集 逆向思维

    给你n个点m条边,保证已经是个连通图,问每次按顺序去掉给定的一条边,当前的连通块数量. 与其正过来思考当前这边会不会是桥,不如倒过来在n个点即n个连通块下建图,检查其连通性,就能知道个数了 /** @ ...

  4. 百度搜索URL中的参数都是什么

    最近,点石排名更新了一个新功能——站内搜索.其实理解起来也很简单,就是通过URL限定搜索结果为某个网站,从而参与点击(例如:https://www.baidu.com/s?wd=SEO&si= ...

  5. 解决 sun.security.validator.ValidatorException: PKIX path building failed

    今天用java HttpClients写爬虫在访问某Https站点报如下错误: sun.security.validator.ValidatorException: PKIX path buildin ...

  6. javascript在IE下不能用 trim函数解决方法

    javascript 的trim 函数在firefox 下面使用没有问题 <script language="javascript"> var test1 = &quo ...

  7. [linx] ubuntu网络重启命令

    /etc/init.d/networking restart #这种方式必须有/etc/network/interface文件 ifconfig eth0 down #直接重启网卡 ifconfig ...

  8. LintCode 397: Longest Increasing Continuous Subsequence

    LintCode 397: Longest Increasing Continuous Subsequence 题目描述 给定一个整数数组(下标从0到n - 1,n表示整个数组的规模),请找出该数组中 ...

  9. 数组A - 财务管理

    Larry graduated this year and finally has a job. He's making a lot of money, but somehow never seems ...

  10. mybatis错误总结

    1:传递多个参数失败   Parameter 'username' not found. Available parameters are [0, 1, param1, param2] dao层错误写 ...