• beginPath()
    • 对画线点的一个开始限制
  • moveTo()
    • 画线的起点，只在开头使用
    • 参数两个x轴，y轴
  • lineTo()
    • 后续连线
    • 两个参数x轴，y轴
  • stroke()
    • 连线无填充
  • fill()
    • 填充，默认黑色
  • closePath()
    • 对画线点的一个结束限制
    • 自动起着连接起点的作用
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport"

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>（二）canvas绘制多边形</title>

</head>

<style>

* {margin: 0;padding: 0;}

body { background-color: black; }

#c1 { background-color: #fff; }

</style>

<body>

<canvas id="c1" width="400" height="400"></canvas>

<script>

var oC = document.getElementById("c1");

var ctx = oC.getContext("2d");

ctx.beginPath();

ctx.moveTo(100,100);

ctx.lineTo(200,200);

ctx.lineTo(300,200);

ctx.closePath();

ctx.stroke();//只进行连线

ctx.beginPath();

ctx.moveTo(100,200);

ctx.lineTo(200,300);

ctx.lineTo(300,300);

ctx.closePath();

ctx.fill();//填充连线的多边形

</script>

</body>

</html>

　　

（三）canvas绘制样式的更多相关文章

  1. canvas学习总结三：绘制路径-线段

    Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...

  2. 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

  3. canvas学习总结三：绘制虚线

    上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...

  4. 使用Canvas绘制图形的基本教程

    原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  5. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  6. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  7. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  8. canvas绘制线和矩形

    ###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...

  9. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

随机推荐

  1. html基本标签介绍及应用

    <!-- html标签 特征: 1.空白折叠现象 2.对空格和换行不敏感 3.标签要严格封闭 p标签的嵌套 多注意!!!!!! html中: 1.行内标签(不换行) (1)在一行内显示 span ...

  2. python进阶——进程/线程/协程

    1 python线程 python中Threading模块用于提供线程相关的操作,线程是应用程序中执行的最小单元. #!/usr/bin/env python # -*- coding:utf-8 - ...

  3. 操作JavaScript数组

    unshift:在数据首段添加元素. push: 在数组的末端添加元素. shift:移除并返回第一个元素,会影响 数组长度. pop:移除并返回最后一个元素.会影响 数组长度. delete  数组 ...

  4. Nested DollsHDU1677

    /*题意:有n个矩形,用长和宽表示,如果一个的长和宽都比另一个小,那么这个嵌放在另一个中 所以先对w从大到小排序,w一样的按h从小到大排序,那么就从后面的箱子往前找,只要前面找到一个人h比自己大的就放 ...

  5. 单片机、嵌入式CAN通信原理

    工作原理: 单片机里内置了一个FIFO(先进先出)芯片,需要发送什么报文,就往这个芯片里写.比如有两个单片机作为CAN节点,A节点往自己的FIFO中写CAN报文,B节点往自己的FIFO中写CAN报文. ...

  6. SpringBoot 加载配置文件

    1.application.properties或application.yaml是SpringBoot默认的配置文件. 可以通过@Value注解 配合 ${......}来读取配置在属性文件中的内容 ...

  7. Kruskal算法-最小生成树

    2017-07-26  10:32:07 writer:pprp Kruskal算法是根据边的加权值以递增的方式,一次找出加权值最低的边来建最小生成树:并且每次添加的边不能造成生成树有回路,直到找到N ...

  8. Activity启动的四种方式

    Activity启动方式有四种,分别是: standardsingleTopsingleTasksingleInstance 可以根据实际的需求为Activity设置对应的启动模式,从而可以避免创建大 ...

  9. centos 安装jdk/resin/mysql

    一.安装JDK 1.判断是否安装 java -version 我的计算机上使用java -version命令,内容如下: java version "1.7.0_45"OpenJD ...

  10. java--何时处理Exception（哪一个层级），包装的基础类处理任务尽可能简洁，写入日志，检查null等运行时异常

    1. 运行时异常和受检异常 2. 提前预防运行时异常.最常发生的是NPE,而检查NPE是程序员的基本职责.其他的,如除0等运行时异常的检查,需要程序员仔细检查,每个函数都得检查(除非可以确定不会有空指 ...