当前位置: 传客网 > HTML5游戏开发一:Canvas绘图

HTML5游戏开发一:Canvas绘图

2017-01-11 作者:土豆咖啡

    HTML5提供了canvas标签用来自由的绘制图像,使得HTML5进行游戏开发成为可能。不论是如果复杂的图像都是由一些点、线组成,这里讲介绍如何使用javaScript在canvas上绘制线、矩形以及弧形等。canvas提供了绘画的画布,具体绘画的操作还是需要一些脚本语言来实现,html5默认的脚本语言为JavaScript,它提供了一系列函数用来进行几何图形的绘制。

    首先要获得一个上下文,这里我们获得一个2d的上下文,使用如下代码:

          var ctx = document.getElementByIdx_x("myCanvas").context("2d");

获得上下文之后才可以用来绘制几何图形,这有点相当于其它语言里面的画笔,下面我们也可以设置一些画笔的参数。比如这里设置线粗5像素,使用红色画笔。

         ctx.lineWidth = 5;

         ctx.strokeStyle = "rgb(255, 0, 0)";

    当上下文(画笔)设置好之后,就可以调用JavaScript的绘制方法来绘制图形了,比如要绘制一个矩形:

         ctx.strokeRect(100, 50, 200, 250);  // 参数依次为x, y, width, height

当然JavaScript还可以绘制路径,使用ctx.beginPath();ctx.moveTo();ctx.LineTo();ctx.closePath();ctx.stroke();ctx.fill(); // 这里stroke用来绘制边,而fill用来填充

还可以来绘制弧线或圆,绘制弧线的方法如下:ctx.arc(cx, cy, radius, start_angle, end_angle, direction);  //这里角度为弧度,方向表示顺时针或逆时针

    到这里我们已经掌握了使用Canvas绘图的方法,剩下的就是灵活运用了,是不是很神奇。



相关推荐

  • 武汉完美空间解答:开发游戏都需要什么人才

    开发一款游戏需要什么人才,目前我们年轻人游戏玩得很多,不管是网络游戏,还是手机游戏,网页游戏,大家都在玩,那么开发一款这样的游戏需要用到哪些技术,用到什么样的人才呢?武汉完美空间游戏动漫学院帮你解析。开发游戏需要的人才:首先一款游戏的开发需

  • 游戏源提示:玩游戏不如开发游戏

      游戏源提示:玩游戏不如开发游戏  也许你现在正在疯狂的沉迷于游戏练习打怪中,并且对游戏中的奇怪的设定破口大骂。每天在各类五花八门的新游中寻找自己喜欢的游戏,却发现没有一款是你中意的游戏。抑或眼巴巴的期待着某款大作的上市,可是为啥大作就这

  • 开发游戏都需要什么人才

    开发一款游戏需要什么人才,目前我们年轻人游戏玩得很多,不管是网络游戏,还是手机游戏,网页游戏,大家都在玩,那么开发一款这样的游戏需要用到哪些技术,用到什么样的人才呢?西安完美空间游戏动漫学院帮你解析。开发游戏需要的人才:首先一款游戏的开发需

  • 零基础可以学游戏开发 :十岁男孩开发游戏

    近日,一条新闻引发了众人的关注:国外一个十岁小孩子学习软件开发,开始独立制作游戏。而这一切都是因为他的父母都是游戏开发者。由此可见,成为一名合格的IT精英,并不需要过人的聪明才智或是文化知识基础,只要有优秀的教师加上良好的学习环境,即使是十

  • 大量android开发游戏源码,demo,基础视频,项目视频,带你飞

    源码+基础视频:http://weidian.com/i/1411913192?wfr=c项目开发视频:http://weidian.com/i/1430586600?wfr=c本人花了很大的心血整理,就3块钱的东西。虽然说

  • 为什么大家都要找厦门欧页科技开发游戏呢

      玩别人的游戏,为什么不做一个自己的游戏让别人来玩呢?其实,要实现这想法并不难,既不需要百万资本,也不需要自主研发,因为厦门欧页科技作为国内最大的棋牌游戏开发商,将给你一个选择的机会和理由,让您快速实现自己的游戏梦。  资历老——8年历程

  • 电脑培训学校:玩游戏,不如自己开发游戏

    相信很多男孩子都喜欢玩游戏,小编每次都会看到很多男孩子在网吧各种玩游戏,玩的还那么疯狂。你们有没有想过,将来玩着自己做的游戏是一件特别酷的事情。想玩游戏,就来邯郸电脑培训学校,在这里你将会学到很多关于如何开发游戏的知识,有木有很有诱惑。赶紧

  • 水果忍者首度开发游戏衍生品

    宝刀出鞘,手起刀落,西瓜、凤梨、草莓、猕猴桃,各种鲜嫩多汁的水果随之爆裂,而时不时出现的“炸弹”更添刺激性,这就是大家都玩过的“切西瓜”游戏,它的正式名称叫水果忍者(FruitNinja),这款简单有趣的手机游戏,一经推出,便风靡全球。最新

  • 日本市场开发游戏 先考虑广告等盈利方式

    33%的用户更喜欢有免费试用版的应用,针对这样的用户给出的建议是尝试免费增值模式,以鼓励用户下载您的应用,帮助用户发现您的应用,调查显示超过三分之二的用户在下载应用前会先研究。在日本,有40%的用户表示在有30分钟空闲时,他们将会选择玩游戏

  • 南京APP定制H5开发游戏开发--班德网络微网站建设

    【该如何做好二维码推广】如今,微信二维码因其扫描方便的特点,被越来越多的人认可。在日常生活中,也可以看到很多产品或品牌商均印有微信二维码,通过扫描可了解与之相关的信息。然而,印在产品后者宣传海报上的二维码比较分散,不足以满足每个人的需求,那

  • 南京微信定制|H5开发游戏开发-班德APP定制

    【微信代运营公司该如何选择】近几年来,微信是真的火了,越来越多的企业加入到这个平台。作为一个企业该如何选择一个不错的微信代运营公司呢?可以从哪些方面来考察呢?下面就让小编为大家详细介绍下吧。一、微信自定义菜单开发看其研发团队:对于微信公众平

  • iOS开发者开发游戏应用APP前要做的一系列准备

    近几年的iOS平台,不仅是用户最热衷的新兴平台,就连开发者也积极地投身其中,并且此趋势一直保持快速增长,从未衰减。现如今iOS平台在全球已经拥有超过两亿的用户,从事iOS应用程序的开发商也达到了四万之多。在中国将近四万的iOS开发者当中,其

  • 南京APP制作APP开发|H5开发游戏开发--德润技术

    对于一个企业来说,如果能够有一个功能性较好的专业网站,无疑对于企业自身的发展和产品的开发和拓展都是非常有帮助的,企业的发展可以较好的借助于自己的专有网站,所以,现在,不少的企业都对自身的网站建设非常感兴趣,还没有网站的企业都在着手开始和建设

  • 用HTML5 Audio API开发游戏音乐

    湖北指数武汉PHP实训支持的浏览器:难度:中等注意:本文讨论的API尚未最终确定,仍在不断变化。请在自己的项目中谨慎使用。介绍音频在很大程度上使得多媒体体验非常引人注目。如果你曾经尝试在关闭声音的情况下看电影,你就很可能已经注意到了这一点。

  • GDF海洋开发游戏理财用700元实现财务自由

    女士们/先生们:您们好。请注意了,只要你抽15分钟仔细的阅读一以下的文字并进执行了这个项目,它将会轻松的让后半辈子衣食无忧!完全得到财务自由和时间自由。请联系QQ|;813314920微信电话18927478439GDF理财规则:GDF投资

  • HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。1、使用Canva

  • Android中Canvas绘图基础详解

    Android中Canvas绘图基础详解(附源码下载)泡在网上的日子发表于2015-11-1811:02第1546次阅读Canvas3编辑推荐:稀土掘金,这是一个高质量的技术干货分享社区,web前端、Android、iOS、设计资源和产品,

  • HTML5之Canvas基础绘图教程

     HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。  好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。1、使用Ca

  • HTML5的canvas画布常用绘图命令总结

    原文链接:http://shuaihua.cc/blog/20150311.php阳光美美哒~啊,首先要在HTML中新增一个canvas标签,然后给他一个身份证号,噗~就是id啦~<⁄canvas>之后在JavaSc

  • 傲翼房卡棋牌游戏开发,房卡棋牌游戏开发有哪些特点特色?

    房卡游戏的出现无疑是另一种对棋牌游戏开发的诠释,对于市场来说是一种新的棋牌游戏类型,比较容易引起多方的关注和期待。那么,房卡游戏开发设计又有哪些不同于棋牌游戏开发的魅力呢?相约傲翼一道领略其独特魅力:魅力一:新名词得到更多搜索度和关注度人们

返回
顶部