Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门

在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏动画效果的原理是怎样的?本篇文章将带您在20分钟内快速了解和上手HTML5游戏开发的神器:Canvas绘制API。

一、Canvas是什么?

Canvas就是一个画布,可以进行画任何的线、图形、填充等一系列的操作,而且操作的画图就是js,所以让js编程到了嗑药的地步。另外Canvas不仅仅提供简单的二维矢量绘图,也提供了三维的绘图,以及图片处理等一系列的api支持。

二、Canvas重要Context对象

(1) 要使用Canvas来绘制图形必须在页面中添加Canvas的标签。

例如: <canvas id="demoCanvas" width="500" height="500"> <p>爷,你还在上个世纪吧,现在都html5了,您还在ie6时代?</p> </canvas>

(2) 当然只有上面的标签,只能是创建好了一个画布,其中width和height属性就是设置画布的大小。Id属性也是必须的,后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文了,Canvas绘制图形都是靠着Canvas对象的上下文对象.

代码: <script type="text/javascript"> //第一步:获取canvas元素 var canvasDom = document.getElementById("demoCanvas"); //第二步:获取上下文 var context = canvasDom.getContext('2d'); </script>

(3) Context上下文默认两种绘制方式:第一种:绘制线(stroke),第二种:填充:fill。

注意:决定了使用哪种方式之后,在填充或者绘制线之前先设置样式。

三、Canvas Fisrt Demo:画一个立体透明的矩形

Canvas绘制的总体的步骤

  • 创建HTML页面,设置画布标签
  • 编写js,获取画布dom对象
  • 通过Canvas标签的Dom对象获取上下文
  • 设置绘制线样式、颜色
  • 绘制矩形,或者填充矩形

Canvas绘制一个矩形和填充一个矩形的Demo

<body>
    <canvas id="demoCanvas" width="500" height="500">
        <p>爷,你还在上个世纪吧,现在都html5了,您还在ie6时代?</p>
    </canvas>
    <!---下面将演示一种绘制矩形的demo--->
    <script type="text/javascript">
        
        //第一步:获取canvas元素
        var canvasDom = document.getElementById("demoCanvas");
        //第二步:获取上下文
        var context = canvasDom.getContext('2d');
        //第三步:指定绘制线样式、颜色
        context.strokeStyle = "red";
        //第四步:绘制矩形,只有线。内容是空的
        context.strokeRect(10, 10, 190, 100);
       
        //以下演示填充矩形。
        context.fillStyle = "blue";
        context.fillRect(110,110,100,100);
    </script>
</body>

最终效果下图:

还不赶快动手试一下?

四、Canvas绘制图片、绘制有意思的图形组合、图片处理等

未完待续,期待下一节吧?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏yang0range

html常用标签

title也是有助于SEO搜索引擎优化的 HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。 HTML中所有的文字之间,如果有空格、换行、tab都将被...

54120
来自专栏javascript趣味编程

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

14300
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

15710
来自专栏知道一点点

八种创建等高列布局【出自w3c】

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可...

13940
来自专栏HTML5学堂

position:absolute 的深入探讨

今天给大家说说,position:absolute 参考谁进行定位的问题。之前大家可能会认为如果absolute元素的父级(祖父)元素没有设置position属...

30160
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(5)---常用的单元格类型(下)

在上一篇,我们介绍了常用了文本类型单元格。除了文本型单元格外,Spread还支持如下13种图形单元格类型:组合框单元格、按钮单元格、复选框单元格、超链接单元格、...

25560
来自专栏Google Dart

AngularDart Material Design 菜单 顶

材质菜单基于MenuModel对象呈现菜单。 此菜单包含material-popup中的material-list和material-button,其文本或图标...

9920
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

19930
来自专栏前端说吧

JS - 可自动伸缩高度的文本框

change事件的现象是,输入框失去焦点的时候才会触发。如果文本框内容超出高度然后用户还在输入的时候,体验就会很不好。而且如果用户一直不点击别的地方让texta...

33020
来自专栏前端黑板报

居中“魔法”总结

作为一个前端程序员,各种居中的需求会经常遇到,比如说文本居中,水平居中,垂直居中,浮动元素居中等等。掌握一些居中的常用方法也是作为前端攻城师必不可少的技能。 因...

257100

扫码关注云+社区

领取腾讯云代金券