html5教程-HTML5 Canvas 初探
脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5 Canvas 初探，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
js代码很简单:
[javascript]
<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 设置@R_512_2387@
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,建议使用chrome,FF
</canvas>
</body>
</html>
最终效果图:
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,建议使用chrome,FF
</canvas>
</body>
</html>
最终效果图:
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-HTML5 Canvas 初探全部内容，希望文章能够帮你解决html5教程-HTML5 Canvas 初探所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10