什么是Canvas？Canvas是HTML5新增的一个标签，你可以把它翻译为画布，通过它可以绘制二维或三维图形，有了它就可以不用安装flash而实现复杂的动画功能。如何通过Canvas绘图？下面我们来看一个简单的例子，涵盖Canvas初始化、图片加载、图形绘制、图片显示等基本功能。
一、HTML页面结构
先看看HTML页面结构，详细代码如下：
标签指定网页标题；</p><p data-track="5"> <meta>标签指定页面使用的字符集；</p><p data-track="6"> <style>标签定义了一个名叫CenterWarp的样式；</p><p data-track="7"> <body>标签中的onload="main()"表示页面加载完毕后调用main函数。</p><p data-track="8"> <body>标签里有一个<div>标签，它的样式表示它的宽高为浏览器客户区的宽高，它的子元素水平、垂直居中。</p><p data-track="9"> <canvas>标签定义了一块绘图区域，但canvas元素本身不绘制，你必须通过JavaScript脚本来绘制，注意其中的id="GameCanvans"，表示可以通过JavaScript函数document.getElementById("GameCanvans")来将对Canvas元素的引用保存至一个变量中，在随后的代码可通过此变量来调用Canvas的绘图函数。</p><p data-track="10"> <strong>二、Canvas初始化</strong></p><p data-track="11"> 首先获取对Canvas元素的引用，然后再获取绘图上下文，代码参见initCanvas()函数：</p><p data-track="12"><br/></p><p data-track="13">此函数首先通过g_canvas=document.getElementById("GameCanvans")函数将Canvas元素的引用保存至全局变量g_canvas中，接着通过g_canvas获取Canvas元素的绘图上下文，并将绘图上下文保存至全局变量g_context中，即g_context=g_canvas.getContext("2d");在接下来的代码中通过此全局变量来调用Canvas的绘图函数。注意：getContext()函数的参数为"2d"，表示获取的是2d绘图上下文，即进行二维绘制。接下来的代码设置了Canvas的宽、高，分别为320和240，最后根据初始化的结果返回true或false。</p><p data-track="14">函数clearScreen()的作用是用黑色填充整个Canvas区域，即用黑色清屏。fillRect（）函数有四个参数，依次为填充区域左上角x、y坐标，填充区域宽、高。</p><p data-track="15"> <strong>三、绘制空心矩形、填充矩形</strong></p><p data-track="16"> 绘制空心矩形需要设置strokeStyle，即矩形边框颜色，然后调用strokeRect()函数，四个参数依次为矩形左上角x、y坐标，宽、高。</p><p data-track="17"> 填充矩形的代码与清屏的代码类似，相关说明参见清屏函数clearScreen()。</p><p data-track="18"> <strong>四、显示图片</strong></p><p data-track="19"> 在Canvas中显示一幅图片需要分两步实现，首先要加载图片，接下来等图片加载完毕后才能绘制，我们先看看加载图片的代码：</p><p data-track="20"> function loadPicture(){</p><p data-track="21"> g_image=new Image();</p><p data-track="22"> g_image.src="default.png";</p><p data-track="23"> g_image.onload=function(){</p><p data-track="24"> drawPicture();</p><p data-track="25"> }</p><p data-track="26"> }</p><p data-track="27"> 第1步：先创建一个Image对象；</p><p data-track="28"> 第2步：设置此图片对象的src属性，即图片路径（此处是相对路径，即，与JavaScript脚本文件处于相同路径）；</p><p data-track="29"> 第3步：图片加载完毕后，调用绘图函数drawPicture()来绘图。</p><p data-track="30"> g_image.onload=function(){}表示图片加载完毕后执行花括号中的语句，类似于<body>标签中的onload="main()"，页面加载完毕后执行main()函数。</p><p data-track="31"> 最后，让我们来看看drawPicture()函数的代码</p><p data-track="32"> function drawPicture(){</p><p data-track="33"> g_context.drawImage(g_image,0,0,300,180,10,50,300,180);</p><p data-track="34"> }</p><p data-track="35"> 即，调用Canvas的drawImage()函数绘图，其参数含义分别表示：</p><p data-track="36"> 1、g_image：图片对象</p><p data-track="37"> 2、0：图像左上角x坐标</p><p data-track="38"> 3、0：图像左上角y坐标</p><p data-track="39"> 4、300：图像宽度</p><p data-track="40"> 5、180：图像高度</p><p data-track="41"> 此例中图片尺寸为400×400，（0,0,300,180）表示从图片左上角（0,0）处复制300×180部分图片到Canvas中</p><p data-track="42"> 6、10：表示在Canvas中绘制的左上角x坐标</p><p data-track="43"> 7、50：表示在Canvas中绘制的左上角y坐标</p><p data-track="44"> 8、300：表示在Canvas中绘制的宽度</p><p data-track="45"> 9、180：表示在Canvas中绘制的高度</p><p data-track="46"> 将参数8和参数9改为与参数4、参数5不一样的数值可以实现缩放效果。</p><p data-track="47">default.png如下图</p><p data-track="48">完整的代码如下：</p><p data-track="49"><script type="text/javascript"></p><p data-track="50"> var g_canvas,g_context,g_image;</p><p data-track="51"> function initCanvas(){</p><p data-track="52"> g_canvas=document.getElementById("GameCanvans");</p><p data-track="53"> g_context=g_canvas.getContext("2d");</p><p data-track="54"> g_canvas.width=320;</p><p data-track="55"> g_canvas.height=240;</p><p data-track="56"> return (g_canvas&&g_context);</p><p data-track="57"> }</p><p data-track="58"><br/></p><p data-track="59"> function clearScreen(){</p><p data-track="60"> g_context.fillStyle="black";</p><p data-track="61"> g_context.fillRect(0,0,320,240);</p><p data-track="62"> }</p><p data-track="63"><br/></p><p data-track="64"> function drawWhiteRect(){</p><p data-track="65"> g_context.strokeStyle="white";</p><p data-track="66"> g_context.strokeRect(10,30,300,10);</p><p data-track="67"> }</p><p data-track="68"><br/></p><p data-track="69"> function fillRedRect(){</p><p data-track="70"> g_context.fillStyle="red";</p><p data-track="71"> g_context.fillRect(10,10,300,10);</p><p data-track="72"> }</p><p data-track="73"><br/></p><p data-track="74"> function drawPicture(){</p><p data-track="75"> g_context.drawImage(g_image,0,0,300,180,10,50,300,180);</p><p data-track="76"> }</p><p data-track="77"><br/></p><p data-track="78"> function loadPicture(){</p><p data-track="79"> g_image=new Image();</p><p data-track="80"> g_image.src="default.png";</p><p data-track="81"> g_image.onload=function(){</p><p data-track="82"> drawPicture();</p><p data-track="83"> }</p><p data-track="84"> }</p><p data-track="85"><br/></p><p data-track="86"> function main(){</p><p data-track="87"> if(!initCanvas()){</p><p data-track="88"> console.log("初始化canvas失败！");</p><p data-track="89"> return;</p><p data-track="90"> }</p><p data-track="91"> clearScreen();</p><p data-track="92"> fillRedRect();</p><p data-track="93"> drawWhiteRect();</p><p data-track="94"> loadPicture();</p><p data-track="95"> }</p><p data-track="96"></script></p><p data-track="97"> 保存以上代码，并在浏览器中打开，将显示如下结果：</p><p data-track="98"> 好了，Canvas基本的绘图功能就介绍完了，现在我们已经完全具备开发简单网页游戏的能力了，接下来将给大家详细介绍如何实现一个数独游戏，敬请关注。</p>
</div>
<div class="pagIng">
<a href="/anyouwz/8079.html">小程序防伪怎么做</a>
<a href="/anyouwz/8081.html">Python用20行代码就能实现漂亮的网页界面？你确定不来看看</a></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".zSubnav li").hover(function(){
$(this).stop().animate({top:"-10"},300)
},function(){
$(this).stop().animate({top:"0"},300)
})
});
$('.fonts a').click(function (){
$('.fonts a').removeClass('active');
$(this).addClass('active');
switch( $(this).index() ){
case 0:
$('.detailCont').css({fontSize:14});
return false;
case 1:
$('.detailCont').css({fontSize:15});
return false;
case 2:
$('.detailCont').css({fontSize:16});
return false;
}
});
</script>
<!-- 底部 -->
<div class="zFooter">
<div class="wrap1200 clearfix">
<div class="cont fl">
<h3>地址 · <span>ADDRESS</span></h3>
<p>地址：建邺区新城科技园嘉陵江东街18号2层</p>
<p>邮箱：309474043@qq.Com</p>
<a class="fukuan tr" href="/anyoucase/">点击查看更多案例</a>
</div>
<div class="tel fl">
<h3>联系 · <span>CALL TEL</span></h3>
<p class="p1">400-8793-956</p>
<p class="p2">售后专线：025-65016872</p>
<p>业务QQ:309474043 售后QQ:1850555641</p>
</div>
<div class="code fr"><img src="/img/wx.jpg"></div>
<div class="clearfix"></div>
<div class="box" style="line-height: 25px;">
<div class="hot fl" style="width: 40%;height: auto;">
<a href="http://www.anyouy.cn/" title="南京网站建设">南京网站建设</a><em>|</em><a href="http://www.anyouy.cn/" title="南京小程序开发">南京小程序开发</a><em>|</em><a href="http://www.anyouy.cn/" title="南京网站开发">南京网站开发</a>
</div>
<div> <p class="copy">©南京安优网络科技有限公司 版权所有 <a href="https://beian.miit.gov.cn" target="_blank">苏ICP备12071769号-4</a> <a href="/sitemap">网站地图</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="links">
<span>友情链接：</span>
<em>|</em>
<a href="http://www.ayxcx.cn/" title="南京小程序开发">南京小程序开发</a> |
</div>
</div>
</div>
<script src="/img/wow.min.js"></script>
<script>$(function(){new WOW().init();})</script>
<script type="text/javascript">
//导航
$(window).scroll(function(){
if($(window).scrollTop()>=100){
$(".zHeader").addClass("on");
}else{
$(".zHeader").removeClass("on");
}
})
//签约
jQuery(".zSigning").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"leftLoop",autoPlay:true,vis:4,scroll:4});
//访问统计
window.onload = function() {
$.ajax({url:"/Api/Hitstall/index",});
}
</script>
<div class="tqfloat">
<ul>
<li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">业务咨询</a></li>
<li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">技术支持</a></li>
<li class="hidden style2"><p>联系电话</p><div class="tel">4008-793-956</div></li>
<li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">投诉留言</a></li>
<li class="hidden gotop"><a class="tit" href="javascript:;"></a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".tqfloat li.style2").hover(function(){
var _this = $(this);
_this.removeClass("hidden").stop().animate({left : - 184}, 400)
}, function(){
var _this = $(this);
_this.stop().animate({left : 0}, 400, function(){
_this.addClass("hidden")
})
})
$(".tqfloat li.style1").hover(function(){
$(this).removeClass("hidden").stop().animate({marginLeft : - 10}, 400)
}, function(){
var _this = $(this);
_this.stop().animate({marginLeft : 0}, 400, function(){
_this.addClass("hidden")
})
})
$(".gotop").click(function(){
$("html,body").stop().animate({scrollTop: "0"},600)
})
$(".subnav li").hover(function(){
$(this).stop().animate({top:"-10"},300)
},function(){
$(this).stop().animate({top:"0"},300)
})
});
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?1c94697d8167ffaf76dd51252f3ad1a7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<div class="jszx" style="display:none">
<div class="jxin"><img src="/img/xt_bg.jpg" alt="" /></div>
<div class="jszxdd">
<h1>零风险合作体验</h1>
<p>侧重以结果为服务导向，不满意退还所有费用，最大限度降低客户的合作风险<br>安优网络从不青睐于向客户虚夸我们的能力<br>如果量身定制的作品让您满意我们相信合作的基础会更加夯实。</p>
<p><a href="tel:400-8793-956">400-8793-956</a></p>
<span><a href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes" target="_blank">在线咨询</a></span><span><a href="javascript:vido(0)" class="jszx1">稍后再说</a></span> </div>
</div>
<script language="javascript">
setTimeout(function (){$(".jszx").show()},3000)//表示1000毫秒后执行第一次显示层
$(function(){
$(".jszx3,.jszx1").click(function(){
$(".jszx").hide();//点击关闭层
//每3000毫秒执行一次显示当前层
$(this).stop().fadeTo(955000, 1, function(){
$(".jszx").show();
});
});
});
</script>
</body>
</html>
