文档章节

HTML5中使用canvas绘制复杂图形

博为峰教研组
 博为峰教研组
发布于 2017/04/06 10:19
字数 302
阅读 3
收藏 0
点赞 0
评论 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方法在直线起点和直线终点之间创建路径,然后将光标移动到指定直线终点。

 

运行结果:

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 49
博文 1224
码字总数 479077
作品 0
黄浦
程序员
Web开发中的矢量绘图(vml,svg)处理和应用

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

kevin_pang
2014/02/25
0
0
HTML5和CSS3新特性一览

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

全部原谅
07/17
0
0
《WebGL编程指南》学习笔记——2.使用元素

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

hushhw
2017/12/16
0
0
JavaEE——HTML5绘画

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

凯哥学堂
2017/10/30
0
0
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
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
提高HTML5 canvas性能的几种方法!

简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2D immediate mode graphic)的标准。许多开发者现在利用它来实现众多的多媒体项...

AARON_RZH
2013/05/21
0
0
如何在 SVG 和 Canvas 之间进行选择

本主题一开始将对 SVG 与 Canvas 进行简要比较,接下来会讨论大量的比较代码示例,如光线跟踪和绿屏。 注意 为了查看本主题中包含的很多示例,你必须使用支持 SVG 和 Canvas 元素的浏览器(如...

Lucups
2014/01/03
0
1
Android 中使用 ichartjs 完成图表的展示

http://www.ichartjs.com/ ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形.ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件...

六的一批
2013/07/18
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

fiddle 4 初始化

下载 配置fiddle 4 如果证书导出失败,执行下面脚本 D:\programs\Fiddler>makecert.exe -r -ss my -n "CN=DO_NOT_TRUST_FiddlerRoot, O=DO_NOT_TRUST, OU=Created by http://www.fiddler2.c......

柯里昂
5分钟前
0
0
rabbitmq学习记录(六)交换机Exchange-direct

实现功能:一条消息发送给多个消费者 交换机模式:direct 相比于之前的fanout模式,可以进一步的筛选获取消息的消费者。 fanout模式下,只要消费者监听的队列,已经与接收生产者消息的交换机...

人觉非常君
22分钟前
0
0
Java 之 枚举

Java 中声明的枚举类,均是 java.lang.Enum 类的子类,Enun 类中的常用方法有: name() 返回枚举对象名称 ordinal() 返回枚举对象下标 valueOf(Class enumType, String name) 转换枚举对象 ...

绝世武神
30分钟前
0
0
使用爬虫实现代理IP池之放弃篇

啥叫代理IP以及代理IP池 概念上的东西网上搜索一下就好了,这里简单科普一下(大部分会读这篇文章的人,基本是不需要我来科普的),白话说就是能联网并提供代理访问互联网的服务器,它提供的...

一别丶经年
46分钟前
0
0
sqoop导入数据到Base并同步hive与impala

使用Sqoop从MySQL导入数据到Hive和HBase 及近期感悟 基础环境 Sqool和Hive、HBase简介 Sqoop Hive HBase 测试Sqoop 使用Sqoop从MySQL导入数据到Hive 使用复杂SQL 调整Hive数据类型 不断更新 ...

hblt-j
今天
0
0
Dart 服务端开发 文件上传

clent端使用angular组件 upload_component.html form id="myForm" method="POST" enctype="multipart/form-data"> <input type="file" name="fileData"> <!-- file field --></form>......

scooplol
今天
0
0
apache和tomcat同时开启,乱码问题

tomcat和apache同时开启,会走apache的转发,执行的是AJP/1.3协议。所以在tomcat的配置文件server中, <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" useBodyEncodingForU......

Kefy
今天
0
0
使用ssh-keygen和ssh-copy-id三步实现SSH无密码登录 和ssh常用命令

ssh-keygen 产生公钥与私钥对. ssh-copy-id 将本机的公钥复制到远程机器的authorized_keys文件中,ssh-copy-id也能让你有到远程机器的home, ~./ssh , 和 ~/.ssh/authorized_keys的权利 第一步...

xtof
今天
0
0
orcale 查询表结构

SELECT t.table_name, t.colUMN_NAME, t.DATA_TYPE || '(' || t.DATA_LENGTH || ')', t1.COMMENTS FROM User_Tab_Cols t, User_Col_Comments t1WHERE t.table_name......

wertwang
今天
0
0
华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大

华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大!华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大! 在华为最新发布的nova 3手机上,抖音通过华为himedia SDK集成了60fps、超级...

华为终端开放实验室
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部