HTML5 Canvas学习---第一章《Hello World及图片显示》

　　在这个章节我们将在Html中使用Canvas标签，再使用Javascript操纵它，达到显示《Hello World》及图片的目的。

开始之前我们需要了解2个对象的概念：window和document。

window对象：window对象在DOM最顶层。我们应该检测这个对象以确保所有的资源和代码在我们开始编写Canvas应用之前已经载入完成。
document对象：该对象包含页面上所有的HTML标签。我们需要查看该对象，以寻找<canvas>标签并且使用JavaScript来操纵他。

HTML代码为：

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><script type="text/javascript" src="chp1.js"></script><script type="text/javascript" src="modernizr.custom.99886.js"></script></head><body>　　　　<canvas id="canvas_helloworld" width="500" height="300">你的浏览器不支持HTML5 Canvas</canvas></body>
</html>

其中chp1.js为我们以后需要编写的javascript脚本。modernizr.custom.99886.js为modernizr第三方javascript插件，使用它可以避免不同浏览器引起的各种问题。

具体内容请看这里：modernizr介绍

首先我们需要检测window对象的load事件，它是当所有的HTML标签载入完成后触发。

检测load时间有两种方式

window.addEventListener("load", eventWindowCallBack, false);第一个参数：事件名称，第二个参数：回调函数。第三个参数：设为false就行
window.οnlοad=function() { ... };

在这个章节以及以后的文章中我们都是用第一种方式。

HTML代码中我们创建了Canvas标签，它主要有三个属性。

id：唯一标识符
width：宽度
height：高度

第一步检测浏览器是否支持canvas，有多种实现方法：theCanvas为我们在HTML中布置得canvas对象。

第一种为

if(!theCanvas || !theCanvas.getContext) {return;}

第二种为

!document.createElement('testcanvas').getContext;

第三种为使用modernizr插件

return Modernizr.canvas;

我们使用第三种方式，因为它在不同的浏览器中做了不同的处理，拿过来直接用。

第二步获取canvas对象，并获取context对象。

var theCanvas = document.getElementById("canvas_helloworld");
var context = theCanvas.getContext("2d"); //canvas中有很多不同的context，这里我们仅需要2D

第三部创建drawScreen()函数，把内容画到界面中。

在这里我们涉及的函数及属性为

fillStyle属性：设置颜色
fillRect(x, y, width, height)：画矩形参数为左上角及宽度和高度。
font属性：设置文字风格
fillText(text, x, y)：往canvas画出字符串，余下的参数为左上角的x坐标和y坐标。

具体代码为

        context.fillStyle="#ffffaa";context.fillRect(0,0,500,300);context.fillStyle="#000000";context.font="20px _sans";context.textBaseline="top";context.fillText("Hello World!", 195, 80);

还有一步我们需要在canvas载入一张图片。在canvas中显示图片，我们需要实例化一个Image()对象并且指定它的src属性。

在显示之前，你需要等待Image载入完毕，当载入完成后可以创建一个回调函数把它显示到屏幕中。

        var img = new Image();img.src="rubi.jpg";img.onload=function() {context.drawImage(img, 180, 130);}

最后我们在canvas的边上画一个黑色的矩形，醒目的显示出来。

　　　　 context.strokeStyle="#000000";context.strokeRect(5, 5, 490, 290);

整理后的代码为

/*** @author Rafael*/
window.addEventListener("load",eventWindowLoaded, false);function eventWindowLoaded() {canvasApp();
}function canvasSupport() {// return !document.createElement('testcanvas').getContext;return Modernizr.canvas;
}function canvasApp() {if(!canvasSupport()) {return;}var theCanvas = document.getElementById("canvas_helloworld");var context = theCanvas.getContext("2d"); //canvas中有很多不同的context，这里我们仅需要2D// if(!theCanvas || !theCanvas.getContext) {// return;// }function drawScreen() {context.fillStyle="#ffffaa";context.fillRect(0,0,500,300);context.fillStyle="#000000";context.font="20px _sans";context.textBaseline="top";context.fillText("Hello World!", 195, 80);var img = new Image();img.src="rubi.jpg";img.onload=function() {context.drawImage(img, 180, 130);}context.strokeStyle="#000000";context.strokeRect(5, 5, 490, 290);}drawScreen();}

至此，这一篇的内容讲完了，今天是学习HTML5的第一天，以后也还会陆续的把最新的学习成果发表出来供大家分享，具体时间为一周4篇左右。

写的不好的地方，望大家谅解，我也是第一次写博客。只要对一个人有帮助，我的目的就达到了。

转载于:https://www.cnblogs.com/tcpcg/archive/2012/12/03/HTML5_Hello_World.html

HTML5 Canvas学习---第一章《Hello World及图片显示》相关推荐

学习 HTML5 Canvas 这一篇文章就够了
一.canvas 简介 <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也 ...
QT学习第一章：基本对话框--利用Qt Designer设计多个UI界面
QT学习第一章:基本对话框--利用Qt Designer设计多个UI界面效果截图: 创建上文件夹Designers,使用Designer设计三个UI界面: First.ui Second.ui T ...
逻辑学学习:第一章:导论
逻辑学学习:第一章:导论本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 开始学习逻辑学,教材为<<普通逻辑学>>,作者杨树森, ...
实战精通OpenCV第一章--基于Android的图片卡通化及肤色改变（三）
第一章基于Android的图片卡通化及肤色改变一.基于Visual Studio的图片卡通化二.基于Visual Studio的肤色改变三.Android代码移植最近由于工作比较忙,很抱歉没 ...
html获取随机字母,html5 canvas随机生成英文字母数字组合图片验证码代码
简单又实用的html5 canvas随机生成英文字母数字组合图片验证码代码,点击验证码图片可更换一组,还可随意修改验证码的内容,样式. 查看演示下载资源: 27 次下载资源下载积分: 20 积分 ...
实战精通OpenCV第一章--基于Android的图片卡通化及肤色改变（二）
转载请注明出处:https://blog.csdn.net/mymottoissh/article/details/86723580 第一章基于Android的图片卡通化及肤色改变一.基于Visu ...
实战精通OpenCV第一章--基于Android的图片卡通化及肤色改变（一）
转载请注明出处:https://blog.csdn.net/mymottoissh/article/details/86709457 本系列博客是基于<Mastering OpenCV with ...
emwin读取sd图片_第12章emwin(ucgui)jpeg图片显示.pdf
您所在位置:网站首页 > 海量文档 &nbsp>&nbsp计算机&nbsp>&nbspwindows相关第12章emwin(ucgui)jpeg图片 ...
Intel汇编语言程序设计学习-第一章基本概念
第一章基本概念 1.1 简单介绍本书着重讲述MS-Windows平台上IA-32(Intel Architecture 32bit,英特尔32位体系架构)兼容微处理器的汇编语言程序设计,可以使用I ...

HTML5 Canvas学习---第一章《Hello World及图片显示》

HTML5 Canvas学习---第一章《Hello World及图片显示》相关推荐

最新文章

热门文章

HTML5 Canvas学习---第一章 《Hello World及图片显示》

HTML5 Canvas学习---第一章 《Hello World及图片显示》相关推荐

最新文章

热门文章

HTML5 Canvas学习---第一章《Hello World及图片显示》

HTML5 Canvas学习---第一章《Hello World及图片显示》相关推荐