html5 canvas结构基础
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小白童鞋的canvas之基本配置篇</title>
<script src="js/modernizr.js"></script>
</head> <body>
<script type="text/javascript">
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(){
return Modernizr.canvas;
}
function canvasApp(){
if(!canvasSupport()){
return;
}else{
var theCanvas = document.getElementById('canvas')
var context = theCanvas.getContext("2d") }
drawScreen();
function drawScreen(){
context.fillStyle="#ff0000";
context.fillRect(0,0,400,400);
context.fillStyle="#000000";
context.font="20px _sans";
context.textBaseline="top";
context.fillText("如有疑问加QQ：1035417613;小白童鞋",0,0);
}
} </script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！
</canvas>
</body>
</html>
http://files.cnblogs.com/files/LoveOrHate/canvas1-1.rar（DEMO下载）
window.addEventListener('load',eventWindowLoaded,false);
脚本执行的过程中需要第一个监听load对象
在html页面加载结束时发生
事件load
事件处理器函数eventWindowLoaded
theCanvas.getContext("2d"）获取2d上下文
modernizr.js是个不错的东西可以检测支持情况
我是在这里下的（吐槽一下链接有点长）
modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load
html5 canvas结构基础的更多相关文章
- HTML5 Canvas（基础知识）
最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...
- [HTML5 Canvas学习] 基础知识
HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...
- HTML5 CANVAS制图 基础总结
一.基本绘图 首先,定义2D渲染变量ct(这里用了Jquery库): var ct = $(#canvasId).get(0).getContext('2d'); 以下是绘制各种基本图形的方法: // ...
- HTML5 canvas之基础篇（一）
一.检测浏览器是否支持canvas if( !canvas || !canvas.getContext){ return; } 也可以使用modernizr.js库,Modernizr是一个易用的轻量 ...
- HTML5 canvas绘图基础（电子名片生成器源码）
创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...
- Html5 Canvas动画基础碰撞检测的实现
在Canvas中进行碰撞检测,大家往往直接采用游戏引擎(Cocos2d-JS.Egret)或物理引擎(Box2D)内置的碰撞检测功能,好奇的你有思考过它们的内部运行机制吗?下面将针对基本的碰撞检测技术 ...
- HTML5 Canvas绘图基础
- HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
- HTML5 Canvas（画布）实战编程初级篇：基本介绍和基础画布元素
欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...
随机推荐
- 初次接触Dynamics 365
最近项目上需要用到微软的Dynamics 365 这个产品,Bing上搜索了一下,看了很多大佬在博客上分享了使用Dynamics 365的经验,简单了解了Dynamics 365 是什么,也有很多大企 ...
- c# 简易绘制C语言头文件包含关系图 v2.0
老规矩,先上图 节点样式说明: 1.粉色圆角,说明该节点下有循环引用 2.黄色菱形,说明该节点代表的文件在项目目录下未找到. 3.红色圆角,说明循环引用(从开始到最终,这种感情没变过,没有谁..... ...
- LeetCode 463. Island Perimeter岛屿的周长 (C++)
题目: You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 repr ...
- Android开发环境的发展演变调研
Android开发环境的发展演变调研 前几年比较多的方法是用JDK+eclipse+ADT,该方法除了要配置JDK的路径之外, 还要在eclipse里面打开SDK Manage进行相应的操作.不过近两 ...
- Sprint最后一天
界面流程: 数据库里的信息: 还存在的问题: 1:选择包车城市时:下面的界面没对应到包车城市类型 2:看不到个人订票信息
- 『编程题全队』Alpha 阶段冲刺博客Day8
1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.修复了看板任务框拖拽时候位置不够精确的问题 2.向个人界面下添加了工具栏 3.个人界面下添加了任务框测试 孙慧君: 1.个人任 ...
- 11th 本周工作量及进度统计
本周PSP: C(类别) C(内容) S(开始时间) ST(结束时间) I(中断时间) T(实际时间) 文档 11月30日 回顾5个问题 13:00 13:50 2 48 11月30日 如果重新来过 ...
- 二叉树的Java实现及特点总结
二叉树是一种非常重要的数据结构,它同时具有数组和链表各自的特点:它可以像数组一样快速查找,也可以像链表一样快速添加.但是他也有自己的缺点:删除操作复杂. 我们先介绍一些关于二叉树的概念名词. 二叉树: ...
- Spring之配置文件中引入其它配置文件
<beans> ... <!--引入其它配置文件--> <import resource="classpath:com/helloworld/beans.xml ...
- Spring之jdbcTemplate：增删改
JdbcTemplate增删改数据操作步骤:1.导入jar包:2.设置数据库信息:3.设置数据源:4.调用jdbcTemplate对象中的方法实现操作 package helloworld.jdbcT ...