• 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. dobbo 简单框架

  2. Shiro理解与总结

    Feature Apache Shiro is a comprehensive application security framework with many features. The follo ...

  3. python之路 RabbitMQ、SQLAlchemy

    一.RabbitMQ RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队列 ...

  4. java调用ffmpeg命令行推流遇到的问题

    1.Java调用命令行,如果没有额外环境变量,不指定工作路径,Runtime有两个方法 public Process exec(String command) public Process exec( ...

  5. Bean的id、name、ref、refid

    Spring中Bean的命名 1.每个Bean可以有一个id属性,并可以根据该id在IoC容器中查找该Bean,该id属性值必须在IoC容器中唯一: 2.可以不指定id属性,只指定全限定类名,如: & ...

  6. Docker与自动化测试及其测试实践

    Docker 与自动化测试 对于重复枯燥的手动测试任务,可以考虑将其进行自动化改造.自动化的成本在于自动化程序的编写和维护,而收益在于节省了手动执行用例的时间.简而言之,如果收益大于成本,测试任务就有 ...

  7. NGINX的IO模型详解

    普及: 用户空间与内核空间: 现在操作系统都是采用虚拟存储器,那么对32位操作系统而言,它的寻址空间(虚拟存储空间)为4G(2的32次方).操作系统的核心是内核,独立于普通的应用程序,可以访问受保护的 ...

  8. Luogu-1975 [国家集训队]排队

    Luogu-1975 [国家集训队]排队 题面 Luogu-1975 题解 题意:给出一个长度为n的数列以及m个交换两个数的操作,问每次操作后逆序对数量 时间,下标和数的大小三维偏序,,,把交换操作看 ...

  9. Caffe实现多标签输入，添加数据层(data layer)

    因为之前遇到了sequence learning问题(CRNN),里面涉及到一张图对应多个标签.Caffe源码本身是不支持多类标签数据的输入的. 如果之前习惯调用脚本create_imagenet.s ...

  10. MFC 任务管理器设计

    在学习界面设计,因为对一些控件不熟悉,所以也参考了别人的.核心代码如下. void CTasklistDlg::Expand() { m_list.SetExtendedStyle(LVS_EX_GR ...