• 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. freemarker split字符串分割 遍历map

    <#list "张三三,李思思,,王强,柳树,诸葛正我"?split(",") as name> "${name}" </ ...

  2. Python3.x：Linux下安装python3.6

    Python3.x:Linux下安装python3.6 下载 #先进入download文件夹 cd /home/download #输入命令(下载到当前目录) wget https://www.pyt ...

  3. Tomcat 启动内存修改

    内存修改文件 Windows 文件 /bin/catalina.bat Linux 文件 /bin/catalina.sh 方法一 # 设置参数 JAVA_OPTS='-Xms[初始化内存大小] -X ...

  4. 20145201 《Java程序设计》第三周学习总结

    20145201 <Java程序设计>第三周学习总结 教材学习内容总结 本周学习了课本第四.五章内容,即认识对象和对象封装. 第四章 认识对象 4.1类与对象 定义类 要产生对象必须先定义 ...

  5. 利用SSH协议在Windows下使用PuTTY连接Ubuntu

    利用SSH协议在Windows下使用PuTTY连接Ubuntu Ubuntu部分 首先我们要为Ubuntu配置一下环境,让它支持ssh服务,我们要做的其实也很简单,就一下两步: 安装OpenSSH软件 ...

  6. Python 中lambda 简单介绍

    转自:https://www.cnblogs.com/AlwaysWIN/p/6202320.html 在学习python的过程中,lambda的语法经常出现,现在将它整理一下,以备日后查看. 1.l ...

  7. iOS日常学习 - iOS10上关于NSPhotoLibraryUsageDescription等问题

    最近升级了Xcode8.0,真是很多坑啊,填完一个来另外一个,今天又遇到了一个,用Xcode8.0上传项目时被驳回说是info.plist里面没有设置NSPhotoLibraryUsageDescri ...

  8. Record and accumulation

    最近有同学在准备校招的问题,问我几个问题,我觉得有必要把大家的问题汇总下: 1.在设计变量的while指挥时候,可以利用弹栈的特性以及Java传值 只是传递的副本  去控制 : https://www ...

  9. data augmentation 总结

    data augmentation 几种方法总结 在深度学习中,有的时候训练集不够多,或者某一类数据较少,或者为了防止过拟合,让模型更加鲁棒性,data augmentation是一个不错的选择. 常 ...

  10. 3.scala容器

    3.scala容器 a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-o ...