文档章节

HTML5中使用canvas绘制矩形

博为峰教研组
 博为峰教研组
发布于 2017/04/06 10:25
字数 475
阅读 15
收藏 0

canvas是HTML5中新增的一个元素,使用Canvas可以绘制任何你喜欢的图形。先来认识什么是Canvas?

1.在页面上放置一个canvas元素,就相当于在页面上放置了一块“画布”,可以在其中进行图像描绘。

2. canvas 通过 JavaScript 来绘制 2D 图形,它是逐像素进行渲染的。

3.在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

我们先使用canvas绘制一个常规的图形矩形

用canvas绘制图形需要以下步骤

1.在页面放置canvas元素,指定它的id,width,height属性

2.在body使用onload=“draw(‘canvas’)”,调用 javaScript脚本代码绘制矩形的方法(这里是定义的方法名为draw)

3.获取canvas元素。

在javaScript代码通过document.getElementById方法获取canvas元素

4.取得上下文context

图形上下文是一个封装了很多绘图功能的对象。需要使用canvas对象的getContext方法来获取图形上下文。在这里将getContext方法的参数设置为“2d”。因为在draw方法中,我们绘制的是平面图形矩形。

 

5.设置绘图样式

通过fillStyle属性设定填充图形的样式

 

通过strokStyle属性设定图形边框的样式

6.指定线宽

通过lineWidth属性指定线宽。

7.绘制矩形

分别使用fillRect方法、strokeRect()方法来填充矩形和绘制矩形边框

 

context.fillRect(50,50,100,100);

context.strokeRect(50,50,100,100);

这两个方法使用同样的参数。x指矩形起点的横坐标,y指矩形起点的纵坐标,width指矩形的宽度,height指矩形的高度。

运行结果:

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
JavaEE——HTML5绘画

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 绘画是HTML5的新功能,以前是没有的,有flash的...

凯哥学堂
2017/10/30
0
0
Web 开发中的矢量绘图处理和应用

矢量绘图一直是 Web 开发中一直比较薄弱的环节。本文首先针对不同浏览器详细阐述不同的矢量绘图解决方案,其中包括 HTML5 Canvas、SVG 以及 VML 等技术;之后针对每种不同的技术介绍其实现和...

IBMdW
2011/09/03
1K
0
Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 ...

kevin_pang
2014/02/25
0
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
0
0
使用 HTML5 canvas 绘制精美的图形

本文主要介绍使用一个简单的 HTML 元素 Canvas 来增强您的 web 页面。通过利用其灵活性和多样性吸引访客反复访问您的站点。 HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HT...

IBMdW
2012/02/21
3.1K
4

没有更多内容

加载失败,请刷新页面

加载更多

《资治通鉴》读书笔记及阅读感悟2200字

《资治通鉴》读书笔记及阅读感悟2200字: 1.用夏桀,商纣暴虐昏君和商汤,周武王仁德明君做比较,因为人民归心,上天赐名要不然就永远要恪守臣节至死不渝。 又用商朝的微子取代纣王,商朝可以...

原创小博客
12分钟前
0
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
51分钟前
2
0
Docker搭建代码质量检测平台-SonarQube(中文版)

Sonar是一个用于代码质量管理的开源平台,用于管理源代码的质量,可以从七个维度检测代码质量。通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groovy等等二十几种编程语言...

Jacktanger
57分钟前
2
0
Windows / Linux / MacOS 设置代理上网的方法汇总

本文汇总了 Windows / Linux / MacOS 设置代理上网的各种方法,总结如下: 1、设置系统代理(Windows、Linux、MacOS) 2、设置代理插件(Chrome、Chromium、Firefox、Opera、QQ等浏览器) 3、...

sunboy2050
昨天
4
0
自定义 Maven 的 repositories

有时,应用中需要一些比较新的依赖,而这些依赖并没有正式发布,还是处于milestone或者是snapshot阶段,并不能从中央仓库或者镜像站上下载到。此时,就需要 自定义Maven的<repositories>。 ...

waylau
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部