文档章节

HTML5中使用canvas绘制矩形

博为峰教研组
 博为峰教研组
发布于 2017/04/06 10:25
字数 475
阅读 14
收藏 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开发中的矢量绘图(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 绘制的图形

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.0...

coko
2013/08/15
0
0
《WebGL编程指南》学习笔记——2.使用元素

《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 WebGL编程指南学习笔记2使用 canvas 元素 下小节我们正...

hushhw
2017/12/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
今天
3
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
今天
6
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
今天
4
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
53
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部