文档章节

HTML5中使用canvas绘制复杂图形

博为峰教研组
 博为峰教研组
发布于 2017/04/06 10:19
字数 302
阅读 4
收藏 0

接下来,我们来看一下除了arc方法以外,其他使用路径绘制图形时会使用的方法。首先从绘制直线开始。

绘制直线一般会用到2个方法,分别是moveTo方法,lineTo方法

1.moveTo方法

moveTo方法的作用是将光标移动到指定的位置,绘制直线的时候以这个坐标为起点。使用如下:moveTo(x,y);

该方法有2个参数,x指指定左标的横坐标,y指指定坐标的纵坐标。

2.lineTo方法

lineTo方法是指在moveTo方法指定直线的起点和指定直线终点之间绘制一条直线。使用如下:

lineTo(x,y);

该方法的2个参数和moveTo方法的参数意义一样。使用该方法绘制完直线后,光标会自动移到lineTo指定的直线的终点。

因此,在创建路径时,需要使用moveTo方法将光标移动到指定的直线起点,使用lineTo方法在直线起点和直线终点之间创建路径,然后将光标移动到指定直线终点。

 

运行结果:

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 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 状态

当我们在 HTML5 Canvas 上使用其 2D 上下文进行图形绘制的时候,可以通过操作 2D 上下文的属性来绘制不同风格的图形,例如不同字体、填充等等。 通常情况下,在画布上的绘图时,您需要更改在...

红薯
2012/01/14
665
3
HTML5和CSS3新特性一览

HTML5和CSS3新特性一览 HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域。 <aside> 定义页面的侧边栏内容。 <bdi> 允许您设置...

全部原谅
07/17
0
0
JavaEE——HTML5绘画

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

凯哥学堂
2017/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Netty 备录 (一)

入职新公司不久,修修补补1个月的bug,来了点实战性的技术---基于netty即时通信 还好之前对socket有所使用及了解,入手netty应该不是很难吧,好吧,的确有点难,刚看这玩意的时候,可能都不知道哪里...

_大侠__
昨天
4
0
Django简单介绍和用户访问流程

Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。 Django是一个开放源代码的Web应用框架,由Python写成。 Django遵守BSD版权,初...

枫叶云
昨天
8
0
EOS错误代码及中文释义

本文集汇总了EOS区块链常见错误代码及其含义,完整错误代码集请查看 EOS错误代码集 - 汇智网 EOS错误代码列表如下, <table class="table table-striped"> <thead> <tr><th>错误代码</th><t......

汇智网教程
昨天
4
0
Spring Cloud Stream消费失败后的处理策略(四):重新入队(RabbitMQ)

应用场景 之前我们已经通过《Spring Cloud Stream消费失败后的处理策略(一):自动重试》一文介绍了Spring Cloud Stream默认的消息重试功能。本文将介绍RabbitMQ的binder提供的另外一种重试...

程序猿DD
昨天
5
0
kiss原则

KISS 原则是用户体验的高层境界,简单地理解这句话,就是要把一个产品做得连白痴都会用,因而也被称为“懒人原则”。换句话说来,”简单就是美“。KISS 原则源于 David Mamet(大卫马梅)的电...

NB-One
昨天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部