HTML5 Canvas 初探

最新推荐文章于 2023-04-18 20:31:46 发布

雨泽

最新推荐文章于 2023-04-18 20:31:46 发布

阅读量1.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/yanghongchang_/article/details/13281759

版权

javascript 专栏收录该内容

164 篇文章 0 订阅

订阅专栏

仅仅只是一个最简单入门的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

雨泽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas 初探

仅仅只是一个简单的hello world.js代码很简单: canvas1 //@author 杨虹昌 //测试浏览器是否支持canvas function canvasSupport(){ return !!document.createElement('canvas').getContext; } //添加window事件,文档加载完成之
复制链接

扫一扫