仅仅只是一个简单的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. 手脱ACProtect v1.35(有Stolen Code)

    1.载入PEID ACProtect v1.35 -> risco software Inc. & Anticrack Soft 2.载入OD,需要注意的是,异常选项除了[内存访问异常] ...

  2. HBuilder mui登录和访问控制教程--转载

    HBuilder mui登录和访问控制教程 mui中提供了登录的模板页,但是对于登录后各个页面的访问控制,刷新等并没有官方的推荐方案.我在这里简单说一种初级的解决方案吧,肯定有不足指出,欢迎批评指正. ...

  3. JavaScript之RegExp

    分为字面量和RegExp构造函数 1.正则表达式的匹配模式支持3个标志 g:表示全局模式,模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止 i:表示不区分大小写模式,即在确定匹配项时忽略模式 ...

  4. [洛谷P3228] [HNOI2013]数列

    洛谷题目链接:[HNOI2013]数列 题目描述 小T最近在学着买股票,他得到内部消息:F公司的股票将会疯涨.股票每天的价格已知是正整数,并且由于客观上的原因,最多只能为N.在疯涨的K天中小T观察到: ...

  5. java网络传输数据

    网络文件传输的问题,实际也是一种IO读写的基本问题.对于网络的文件数据写入到服务器的进程中,然后把进程中的网络IO系统传递到客户机,这个阶段,数据以字节流的形式保存.当该字节流被客户进程接受后,客户进 ...

  6. Codeforces Round #420 (Div. 2) A-E

    本来打算划划水洗洗睡了,突然听到这次的主人公是冈部伦太郎 石头门(<steins;gate>)主题的比赛,岂有不打之理! 石头门真的很棒啊!人设也好剧情也赞曲子也特别好听. 推荐http: ...

  7. HDU 2050 折线分割平面 （数学）

    题目链接 Problem Description我们看到过很多直线分割平面的题目,今天的这个题目稍微有些变化,我们要求的是n条折线分割平面的最大数目.比如,一条折线可以将平面分成两部分,两条折线最多可 ...

  8. solr笔记之安装部署到tomcat

    1. 下载 solr 去官网下载,下载的时候选清华的镜像源,这个页面:https://mirrors.tuna.tsinghua.edu.cn/apache/lucene/solr/7.1.0/ 在/ ...

  9. react CRA antd 按需加载配置 lessloader

    webpack配置 webpack.config.dev.js, webpack.config.prod同理. 'use strict'; const autoprefixer = require(' ...

  10. 【过滤器】web中过滤器的使用与乱码问题解决

    一.过滤器Filter 1．filter的简介 filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目   标资源访问前后进行逻辑处理 2．快速入门 步骤: 1)编写一个过 ...