课程免费试听
网络营销培训专家:新川教育
   著名网络营销培训、淘宝电商培训机构.
实力机构,系统实战!免费试听.
网络营销,淘宝培训课程优惠
什么是Canvas《HTML5系列教程16》

来源:新川教育 阅读数:1767
添加时间:2017-4-22   类别:网页设计教程

什么是Canvas《HTML5系列教程16》

什么是Canvas《HTML5系列教程16》

    什么是canvas,canvas顾名思义是一块画布,也是HTML5中新增加的一个元素,它能够在网页直接绘制多种路径、圆形、弧形、矩形和字符,还能够添加图像,并对添加的图像进行平铺和裁剪处理,甚至可以反转图像的颜色。不过它本身只是一个容器,图形和图像的实现都得依靠JavaScript。在这时候JavaScript就如同一支画笔。接下来我们通过两个示例来简单了解一下什么是canvas吧!


1.如何在HTML5页面中添加canvas元素

    “光说不练,是个笨蛋!”说得再多,不如动手做一做,只有频繁的敲代码,让知识在敲敲打打的过程中自然而然地刻录在脑海里,而不是靠单纯的阅读和记忆。接下来我们打开HTML编辑器,将以下代码敲入吧,这些代码将在HTML5页面中添加canvas元素。我们以Dreamweaver CC为例,首先新建一个HTML5文档。

    上图的代码中,id="myCanvas"为Canvas元素指定了一个id,便于在将来的JavaScript代码中引用。我们知道id属性是HTML的全局属性,用于规定元素的唯一标识。

    在Dreamweaver CC 中的完整代码和预览图效果如下图所示,从代码中我们可以看到以上代码都被添加到了<body></body>标签之间。

在Dreamweaver CC 中预览canvas元素

    保存一下文件,然后我们在谷歌浏览器中预览一下效果。是不是什么也看不到,这是因为canvas只有宽和高两个属性,我们将在接下来的一个示例中绘制一个矩形,这样就能很直观的看到它的作用了。


2.绘制一个蓝色的矩形

    绘制蓝色矩形的代码如下图所示:

用canvas元素绘制蓝色矩形代码示例

用canvas元素绘制蓝色矩形示例


    相信到这里大家应该大概了解到什么是Canvas了。在下一篇文章中,将为大家介绍如何用canvas绘制一些简单的线条。谢谢大家的观看。祝大家:身体健康、生活愉快。

了解更多精彩资讯,请加我们的官方微信:pyyuanxing!

学营销送淘宝大优惠活动!    限20名! 报名从速。

      友情链接

  1. 办公文秘
  2. 美术培训
  3. 营销就业班
  4. 资料下载
  5. 学员作品
  6. 学校图片
  7. 联系方式
  8. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   
电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息 
咨询微信:18926224142   微信公众号:新川教育
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6