网上教学
网络营销培训专家新川教育
   著名实战网络营销课程培训机构.
本校电商部业务:网站建设、SEO介绍
网络营销,淘宝培训课程优惠
什么是Canvas《HTML5系列教程16》

来源:新川教育 阅读数:2805
添加时间: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!

      友情链接

  1. 办公文秘
  2. 美术培训
  3. SEM培训
  4. UI设计
  5. PS图片处理
  6. 营销就业班
  7. 跨境电商
  8. 微信营销
  1. 开班信息
  2. 教学优势
  3. 师资介绍
  4. 资料下载
  5. 工作推荐
  6. 学员作品
  7. 学校图片
  8. 视频营销

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

粤公网安备 44011302001949号 site map