您现在的位置是：网站首页> 编程资料编程资料
html5 canvas-1.canvas介绍(hello canvas)HTML5之HTML元素扩展(上)—新增加的元素及使用概述让IE6支持HTML5元素的方法检测浏览器是否支持html5视频的代码几个解决兼容IE6\7\8不支持html5标签的几个方法html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式input file上传文件样式支持html5的浏览器解决方案让IE支持HTML5的方法IE支持HTML5的解决方法如何让IE9以下版本(ie6/7/8)认识html5元素
2023-10-15
406人已围观
简介 大家都知道，目前并不是所有的浏览器中支持html5，就算是支持html5的浏览器，也不见得支持html5所有的新特性,建议大家使用firefox（开发者的最爱）或者是chrome浏览器，我所有的例子都是基于firefox开发的
从今天开始，我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas：Native Interactivity and Animation for the Web》后的总结，有兴趣的朋友可以去下载英文原版书籍阅读。这本书通过介绍canvas游戏开发的方式，向我们展现canvas强大的功能，我觉得相当不错，通过阅读这本书我学到了canvas很多的知识。其实canvas本身的api并不多，关键是活学活用，学会对api的组合使用制作出令人难以置信的效果。而这本书就是你学习canvas最好的选择，只可惜他暂时还没有中文版，英文不好的朋友只有再等等了。
大家都知道，目前并不是所有的浏览器中支持html5，就算是支持html5的浏览器，也不见得支持html5所有的新特性。所以大家要选择一款比较新的浏览器作为自己的调试环境，建议大家使用firefox（开发者的最爱）或者是chrome浏览器，我所有的例子都是基于firefox开发的。
html5相关的基础知识这里就不做介绍了，网上有很多关于html5的教程，自行学习吧。学习html5需要大家有比较好的javascript的基础，大家可以去汤姆大叔的博客进行学习：http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html。其实他的这个系列课程还是有相当难度的，50多篇全学好你应该算是js专家了。
现在我们正式开始我们的canvas课程，第一个例子：“hello canvas”。
首先需要在body中添加canvas标签，如下：
canvas中的text部分将会在浏览器不支持canvas对象时显示。
定义了canvas标签，当我们需要通过js对他进行操作的时候，通过getElementById就可以实现。
var theCanvas = document.getElementById("canvasOne");我们现在已经习惯使用jquery来开发任务，那么使用jquery如何获取canvas对象呢？
var canvas = $('#canvasOne').get(0);或var canvas = $('#canvasOne')[0];不知道大家注意到get(0)和[0]没有，如果没有使用get()方法或者[]下标的话，你的js代码将不能正常对canvas进行操作。因为$('#canvasOne')获取到的是一个jquery对象，而我们实际要操作的是一个html dom对象。这里有存在一个jquery对象转变成dom对象的问题，通过get()或者下标的方式就完成了这个转换。如果需要把一个dom对象转换成jquery对象，可以使用$()方法实现。不清楚的朋友只有自己去百度了，这里不做深究。
为了代码的健壮性，我们需要判断你的浏览器是否支持canvas对象，可以通过下面代码实现。
if (!theCanvas || !theCanvas.getContext) {
return;
}
不过推荐大家使用modernizr.js库完成这一工作，这是一个很通过的html5 js库，提供了很多有用的方法
function canvasSupport () {
return Modernizr.canvas;
}
canvas支持2d渲染，通过如下代码实现：
var context = theCanvas.getContext("2d");
下面我们就可以通过context对象在canvas上绘制图像了。
//设置区域颜色
context.fillStyle = "#ffffaa";
//绘制区域
context.fillRect(0, 0, 500, 300);
//设置字体
context.font = "20px _sans";
//设置垂直对齐方式
context.textBaseline = "top";
//绘制文字
context.fillText ("Hello World!", 195, 80);
//设置边框颜色
context.strokeStyle = "#000000";
//绘制边框
context.strokeRect(5, 5, 490, 290);
下面介绍下图片的绘制。由于图片的异步下载的，为了保证你用canvas绘制一个图片时，该图片已经下载完毕，我们使用下面的方式：
var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function () {
context.drawImage(helloWorldImage, 160, 130);
}
当图片下面完毕时，会触发onload事件，这里再使用context对象绘制图片。
大家下载demo看完整代码，demo下载地址：html5canvas.helloworld.zip
大家都知道，目前并不是所有的浏览器中支持html5，就算是支持html5的浏览器，也不见得支持html5所有的新特性。所以大家要选择一款比较新的浏览器作为自己的调试环境，建议大家使用firefox（开发者的最爱）或者是chrome浏览器，我所有的例子都是基于firefox开发的。
html5相关的基础知识这里就不做介绍了，网上有很多关于html5的教程，自行学习吧。学习html5需要大家有比较好的javascript的基础，大家可以去汤姆大叔的博客进行学习：http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html。其实他的这个系列课程还是有相当难度的，50多篇全学好你应该算是js专家了。
现在我们正式开始我们的canvas课程，第一个例子：“hello canvas”。
首先需要在body中添加canvas标签，如下：
复制代码
代码如下:canvas中的text部分将会在浏览器不支持canvas对象时显示。
定义了canvas标签，当我们需要通过js对他进行操作的时候，通过getElementById就可以实现。
var theCanvas = document.getElementById("canvasOne");我们现在已经习惯使用jquery来开发任务，那么使用jquery如何获取canvas对象呢？
var canvas = $('#canvasOne').get(0);或var canvas = $('#canvasOne')[0];不知道大家注意到get(0)和[0]没有，如果没有使用get()方法或者[]下标的话，你的js代码将不能正常对canvas进行操作。因为$('#canvasOne')获取到的是一个jquery对象，而我们实际要操作的是一个html dom对象。这里有存在一个jquery对象转变成dom对象的问题，通过get()或者下标的方式就完成了这个转换。如果需要把一个dom对象转换成jquery对象，可以使用$()方法实现。不清楚的朋友只有自己去百度了，这里不做深究。
为了代码的健壮性，我们需要判断你的浏览器是否支持canvas对象，可以通过下面代码实现。
复制代码
代码如下:if (!theCanvas || !theCanvas.getContext) {
return;
}
不过推荐大家使用modernizr.js库完成这一工作，这是一个很通过的html5 js库，提供了很多有用的方法
复制代码
代码如下:function canvasSupport () {
return Modernizr.canvas;
}
canvas支持2d渲染，通过如下代码实现：
var context = theCanvas.getContext("2d");
下面我们就可以通过context对象在canvas上绘制图像了。
复制代码
代码如下://设置区域颜色
context.fillStyle = "#ffffaa";
//绘制区域
context.fillRect(0, 0, 500, 300);
//设置字体
context.font = "20px _sans";
//设置垂直对齐方式
context.textBaseline = "top";
//绘制文字
context.fillText ("Hello World!", 195, 80);
//设置边框颜色
context.strokeStyle = "#000000";
//绘制边框
context.strokeRect(5, 5, 490, 290);
下面介绍下图片的绘制。由于图片的异步下载的，为了保证你用canvas绘制一个图片时，该图片已经下载完毕，我们使用下面的方式：
复制代码
代码如下:var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function () {
context.drawImage(helloWorldImage, 160, 130);
}
当图片下面完毕时，会触发onload事件，这里再使用context对象绘制图片。
大家下载demo看完整代码，demo下载地址：html5canvas.helloworld.zip
相关内容
- html5指南-1.html5全局属性(html5 global attributes)深入理解html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- html5指南-3.如何实现html元素拖拽功能结合html5+nodejs+express实现拖拽上传的功能HTML5拖拽文件到浏览器并实现文件上传下载功能代码HTML5实现的超流畅拖拽效果(相对以前的html版本)html5 拖拽上传图片实例演示突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述HTML5实现的拖拽效果HTML table鼠标拖拽排序功能
- html5指南-4.使用Geolocation实现定位功能使用HTML5 Geolocation实现一个距离追踪器Html5 Geolocation获取地理位置信息实例HTML5的Geolocation地理位置定位API使用教程html5指南-7.geolocation结合google maps开发一个小的应用HTML5 Geolocation API的正确使用方法
- html5指南-5.使用web storage存储键值对的数据html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- html5指南-6.如何创建离线web应用程序实现离线访问HTML5离线缓存Manifest是什么HTML5 离线应用之打造零请求、无流量网站的解决方法HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览HTML5离线应用与客户端存储的实现
- html5指南-7.geolocation结合google maps开发一个小的应用使用HTML5 Geolocation实现一个距离追踪器Html5 Geolocation获取地理位置信息实例HTML5的Geolocation地理位置定位API使用教程html5指南-4.使用Geolocation实现定位功能HTML5 Geolocation API的正确使用方法
- 在html5的Canvas上绘制椭圆的几种方法总结html5-Canvas可以在web中绘制各种图形HTML5 Canvas绘制超级漂亮的发光Loading动画HTML5在canvas中绘制复杂形状附效果截图HTML5 canvas绘制的玫瑰花效果html5使用canvas绘制一张图片html5使用canvas绘制太阳系效果
- html5构建触屏网站之touch事件介绍html5 touch事件实现触屏页面上下滑动(二)html5 touch事件实现触屏页面上下滑动(一)html5 touch事件实现页面上下滑动效果【附代码】
- 我叫mt 卓越游戏官方微信兑换功能上线公告通知_手机游戏_游戏攻略_
- 我叫MT3.2神庙外围上层2号boss伤害属性测试分析_手机游戏_游戏攻略_
