仅仅只是一个简单的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. js 根据url 下载图片

    downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttr ...

  2. 使用cron命令配置定时任务（cron jobs）

    原文 http://www.cnblogs.com/end/archive/2012/02/21/2361741.html 开机就启动cron进程的设置命令:chkconfig --add crond ...

  3. SpringBoot (六) ：如何优雅的使用 mybatis

    原文出处: 纯洁的微笑 这两天启动了一个新项目因为项目组成员一直都使用的是mybatis,虽然个人比较喜欢jpa这种极简的模式,但是为了项目保持统一性技术选型还是定了 mybatis.到网上找了一下关 ...

  4. 前端PHP入门-009-匿名函数

    想想JavaScript当中是否有这个概念? 所谓匿名,就是没有名字. 匿名函数,也就是没有函数名的函数. 匿名函数的第一种用法,直接把赋数赋值给变量,调用变量即为调用函数. 匿名函数的写法比较灵活. ...

  5. [LeetCode] 数学计算模拟类问题：加法，除法和幂，注意越界问题。题 剑指Offer，Pow(x, n) ，Divide Two Integers

    引言 数学计算的模拟类题目,往往是要求实现某种计算(比如两数相除),实现的过程中会有所限定,比如不允许乘法等等. 这类题目首先要注意计算过程中本身的特殊情况.比如求相除,则必须首先反映过来除数不能为0 ...

  6. 【Web】Struts之namespace

    ZZ:struts2学习:配置篇之namespace 在struts1中是没有命名空间这个概念的,通过命名空间我们可以将所有的action配置划分为一个个逻辑单元,每个单元都有它自己的标识前缀.命名控 ...

  7. Qt undefined reference to ***

    错因:某个类声明了一个函数但是没有定义就直接使用.

  8. ⑥ 设计模式的艺术-06.建造者（Builder）模式

    场景 我们要建造一个复杂的产品.比如:神州飞船,Iphone.这个复杂的产品的创建.有这样一个问题需要处理: 装配这些子组件是不是有个步骤问题? 实际开发中,我们所需要的对象构建时,也非常复杂,有很多 ...

  9. canvas 绘制星座图（好玩）--转载

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  10. Tensorflow中使用TFRecords高效读取数据--结合Attention-over-Attention Neural Network for Reading Comprehension

    原文链接:https://arxiv.org/pdf/1607.04423.pdf 本片论文主要讲了Attention Model在完形填空类的阅读理解上的应用. 转载:https://blog.cs ...