文档章节

HTML5的CANVAS绘制线条,MOVETO和LINETO详解

lotozhou
 lotozhou
发布于 2015/11/12 16:37
字数 439
阅读 33
收藏 0

今天在看html5,里面新增的属性有一个canvas,它相当于一个画布你可以用js在里面画你想要的效果!我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚,尤其是moveTo和lineTo函数没有说的很明白!所以特地在这里与新手朋友分享一下我的理解!

一、w3c里面的代码和实现效果

    手册的代码是这样的

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.moveTo(10, 10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

实现的效果是这样的

 二、详细讲解每一个步骤

    1,获取id值为myCanvas的canvas标签并赋值给c!(指定在哪里画)

    2,

c.getContext('2d');

3,    手册上说是返回一个用于在画布上绘图的环境,2d表示二维绘图!(指定画出的图案的类型)

cxt.moveTo(10, 10);

指定义了一个起点,坐标是(20,20)!这时候的起点如下图

,4,

cxt.lineTo(150, 50);

(1)添加一条直线,起点是第3步设置的(10, 10),终点现在设置的(150, 50)!    这有两个功能:

    (2)设置新的起点为(150, 50),相当于又来了一句cxt.moveTo(150, 50);而这时候的起点如下图

  5,

cxt,lineTo(10, 50);

跟上一条语句功能相同,这时候起点如下图

6,

cxt.stroke();

上面做了那么多的事情但始终没有在网页上面画出了,而这个语句就是将你以上所有做的事都在网页上面呈现出来!所以如果你要测试线条或者图案效果的话,一定不要忘了这一句,不然网页上面是什么都显示不出啦的


© 著作权归作者所有

lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
HTML5 Canvas 属性、定义及方法

当你创建一个<canvas>元素后,就拥有了它的绘图上下文。 一、简单图形,整套的属性和方法专门用于绘制矩形: 1、fillStyle可以设置为CSS颜色、一个图案或一种颜色渐变。fillStyle默认是纯黑色...

程明卫
2011/04/01
3.4K
0
Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的其他API:绘制线条、绘制椭圆、绘制图片、图片处理等...

aicoder
2014/08/29
0
0
Html5 Canvas画线有毛边解决方法

Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按这样的坐标进行线条渲...

山哥
2011/06/02
9.6K
0
使用 HTML5 canvas 绘制的图形

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

coko
2013/08/15
123
0
HTML5新特性总结

一、HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article、footer、header、nav、secti...

黄金林
2016/12/21
16
0

没有更多内容

加载失败,请刷新页面

加载更多

Android面试常客之Handler全解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/fnhfire_7030/article/details/79518819 前言:又到了一年...

shzwork
16分钟前
3
0
position sticky 定位

本文转载于:专业的前端网站➫position sticky 定位 1、兼容性 https://caniuse.com/#search=sticky chrome、ios和firefox兼容性良好。 2、使用场景 sticky:粘性。粘性布局。 在屏幕范围内时...

前端老手
23分钟前
2
0
CentOS 7 yum 安装 PHP7.3 教程

参考:https://www.mf8.biz/centos-rhel-install-php7-3/ 1、首先安装 EPEL 源: yum install epel-release 安装 REMI 源: yum install http://rpms.remirepo.net/enterprise/remi-release......

dragon_tech
38分钟前
3
0
Linux物理网卡聚合及桥接

Linux内部实现的bridge可以把一台机器上的多张网卡桥接起来,从而把自己作为一台交换机。同时,LInux bridge还支持虚拟端口,即桥接的不一定都是物理网卡接口,还可以是虚拟接口。目前主要表...

xiangyunyan
38分钟前
3
0
一起来学Java8(一)——函数式编程

在这篇文章中,我们将了解到在Java8下如何进行函数式编程。 函数式编程 所谓的函数式编程就是把函数名字当做值进行传递,然后接收方拿到这个函数名进行调用。 首先来看下JavaScript如何进行函...

猿敲月下码
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部