仅仅只是一个最简单入门的hello world.
先看代码以及效果然后在解释:,先熟悉简单的API
js代码很简单:
<!DOCTYPE HTML>
<html lang="cn">
<head>
<title> canvas Hello World! </title>
<meta charset="UTF-8">
<script type="text/javascript">
//检查浏览器是否支持canvas
//返回值 true 支持,false不支持
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(){
//如果浏览器不支持canvas则不执行以下操作
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);//渲染内容为"Hello World",x,y的坐标为195,80
//image 加载一张图片并输出到画布
//创建图片对象
var helloWorldImage=new Image();
//设置图片地址
helloWorldImage.src="http://avatar.csdn.net/0/E/9/1_yhc13429826359.jpg";
//需要等到图片加载完毕之后才能显示,所以创建一个onload的回调函数,图片加载完成之后执行
helloWorldImage.οnlοad=function(){
//渲染图片,第一个参数为图片对象,第二,三个参数为x,y坐标
context.drawImage(helloWorldImage,160,130);
};
//border 边框设置
//围绕图像以及文本绘制一个非填充的小方块,
context.strokeStyle="#000000";//设置边框颜色
//绘制矩形边框,一下四个参数分别为:
//第一和第二个参数:左上角x,y坐标
//第三和第四个参数:右下角x,y坐标
context.strokeRect(5,5,490,290);
}
drawScreen();
}
</script>
</head>
<body>
<div style="position:absolute;top:50px;left:50px;">
<canvas id="theCanvas" width="500" height="500">
浏览器不支持html5 canvas,建议使用chrome,FF
</canvas>
</body>
</html>
最终效果图:
对应源代码:https://code.csdn.net/yhc13429826359/html5_canvas_demo