仅仅只是一个 简单 的hello world. @H_ 777 _1@&nbs p;
js代码很简单:
[javascript]
<!DOCTY PE HTML >
<ht ML lang="cn">
<head>
<t IT le> canvas1 </title>
< ;m eta charset="UTF-8">
[javascript]
//@author 杨虹昌
<script type="text/javascript">
//测试浏览器 是否 支持canvas
function canvasSupport(){
return !!document.createElement(& # 39;canvas').getContext;
}
//添加window事件,文档加载完成之后执行此函数
window.addEventListener('load',eventWindowLoaded,false);
//输出日志信息对象简单封装
VAR Debugger=function(){};
Debugger. LOG =function(message){
try{
console.log(message);
}catch(e){
return;
}
}
//窗体加载后执行函数
function eventWindowLoaded(){
canvasApp();
}
//
function canvasApp(){
if(!canvasSupport()){
return;
}
//获取html元素id为theCanvas的 画布 元素
var theCanvas=document.getElementById('theCanvas');
//获得2D上下文,注意:此处2d只能是小写,大写则为un define d,很郁闷为何不做静态常量,也许是我不 知道 吧
var context=theCanvas.getContext('2d');
//输出信息
Debugger.log('Drawing Canvas');
//画对应类容
function drawScreen(){
//background 设置 背景颜色
context.fillStyle="#ffffaa";
context.fillRect(0,0,500,300);
//font 设置字体
context.fillStyle="#000000";
context.font="20px_sans";
context.textBaseline="top";
context.fillText("Hello World",195,80);
//image 加载一张图片并输出到画布
var helloWorldImage=new Image();
helloWorldImage.src=/uploa DF ile/2013/1028/20131028034833472. jpg ";
helloWorldImage.onload=function(){
context.drawImage(helloWorldImage,160,130);
};
//border 边框设置
context. stroke Style="#000000";
context.strokeRect(5,5,490,290);
}
drawScreen();
}
</script>
</head>
<body>
<p style="position:absolute;top:50px;left:50px;">
<canvas id="theCanvas" width="500" h ei ght="500">
浏览器不支持 html5 canvas,建议使用ch rom e,FF
</canvas>
</body>
</html>
最终效果图:
仅仅只是一个简单的hello world.
js代码很简单:
[javascript]
<!DOCTYPE HTML>
<html lang="cn">
<head>
<title> canvas1 </title>
<meta charset="UTF-8">
[javascript]
//@author 杨虹昌
<script type="text/javascript">
//测试浏览器是否支持canvas
function canvasSupport(){
return !!document.createElement('canvas').getContext;
}
//添加window事件,文档加载完成之后执行此函数
window.addEventListener('load',eventWindowLoaded,false);
//输出日志信息对象简单封装
var Debugger=function(){};
Debugger.log=function(message){
try{
console.log(message);
}catch(e){
return;
}
}
//窗体加载后执行函数
function eventWindowLoaded(){
canvasApp();
}
//
function canvasApp(){
if(!canvasSupport()){
return;
}
//获取html元素id为theCanvas的画布元素
var theCanvas=document.getElementById('theCanvas');
//获得2D上下文,注意:此处2d只能是小写,大写则为undefined,很郁闷为何不做静态常量,也许是我不知道吧
var context=theCanvas.getContext('2d');
//输出信息
Debugger.log('Drawing Canvas');
//画对应类容
function drawScreen(){
//background 设置背景颜色
context.fillStyle="#ffffaa";
context.fillRect(0,0,500,300);
//font 设置字体
context.fillStyle="#000000";
context.font="20px_sans";
context.textBaseline="top";
context.fillText("Hello World",195,80);
//image 加载一张图片并输出到画布
var helloWorldImage=new Image();
helloWorldImage.src=/uploadfile/2013/1028/20131028034833472.jpg";
helloWorldImage.onload=function(){
context.drawImage(helloWorldImage,160,130);
};
//border 边框设置
context.strokeStyle="#000000";
context.strokeRect(5,5,490,290);
}
drawScreen();
}
</script>
</head>
<body>
<p style="position:absolute;top:50px;left:50px;">
<canvas id="theCanvas" width="500" height="500">
浏览器不支持 HTML5 canvas ,建议使用c hr ome,FF
</canvas>
</body>
</html>
最终效果图:
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5 Canvas 初探 全部内容，希望文章能够帮你解决 html5教程-HTML5 Canvas 初探 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5 Canvas 初探的详细内容...