1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>05-Canvas简单图形</title>

 6     <style>

 7         *{

 8             margin: 0;

 9             padding: 0;

10         }

11         canvas{

12             display: block;

13             margin: 0 auto;

14             background: red;

15         }

16     </style>

17 </head>

18 <body>

19 <canvas width="500" height="500"></canvas>

20 <script>

21     /*

22     1.closePath

23     自动创建从当前点回到起始点的路径

24

25     2.lineJoin

26     设置相交线的拐点样式 miter(默认)、round、bevel

27     * */

28     let oCanvas = document.querySelector("canvas");

29     let oCtx = oCanvas.getContext("2d");

30     oCtx.moveTo(50, 50);

31     oCtx.lineTo(200, 50);

32     oCtx.lineTo(200, 200);

33     // 注意点: 如果通过lineTo来闭合图形, 那么是不能很好的闭合

34     // oCtx.lineTo(50, 50);

35     oCtx.closePath();

36     oCtx.lineWidth = 20;

37     // oCtx.lineJoin = "round";

38     oCtx.lineJoin="bevel";

39     // oCtx.lineJoin="miter";

40     // 注意点: 默认情况下不会自动从最后一个点连接到起点

41     oCtx.stroke();

42 </script>

43 </body>

44 </html>

05-canvas绘制简单图形之三角形的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. canvas绘制简单图形

    canvas绘图篇: canvas绘制矩形: <!DOCTYPE html> <html> <head lang="en"> <meta ...

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

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

  4. JavaScript动画基础：canvas绘制简单动画

    动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

  5. Java入门：绘制简单图形

    在上一节,我们学习了如何使用swing和awt工具创建一个空的窗口,本节学习如何绘制简单图形. 基本绘图介绍 Java中绘制基本图形,可以使用Java类库中的Graphics类,此类位于java.aw ...

  6. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  7. h5 的canvas绘制基本图形

    文章地址:https://www.cnblogs.com/sandraryan/ canvas是一个标签,可用于绘制复杂图形,渲染效果比普通DOM快 某些低版本浏览器不支持 canvas 使用原生几乎 ...

  8. 在高德地图上用svg.js绘制简单图形

    这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层 ...

  9. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  10. Windows控制台下绘制简单图形

    最近接触到一个很有意思的问题,如何在Windows控制台下画图,翻遍了C的头文件也没找到画图的函数,好吧,那就用Windows提供的API函数吧,看来想移植是没戏了.先画一个简单的图,类似心电图那种吧 ...

随机推荐

  1. 零基础写框架(3): Serilog.NET 中的日志使用技巧

    .NET 中的日志使用技巧 Serilog Serilog 是 .NET 社区中使用最广泛的日志框架,所以笔者使用一个小节单独讲解使用方法. 示例项目在 Demo2.Console 中. 创建一个控制 ...

  2. Spring之webMvc异常处理

    异常处理可以前端处理,也可以后端处理. 从稳妥的角度出发,两边都应该进行处理. 本文专门阐述如何在服务端进行http请求异常处理. 一.常见的异常类型 当我们做http请求的时候,会有各种各样的可能错 ...

  3. HTTP协议 学习：2-基于libcurl的开发

    HTTP协议 学习:2-基于libcurl的开发 背景 上一讲我们介绍了HTTP报文的一些内容,这一讲我们基于http有关的开源库,进行HTTP通信.最后再完成一个简单的下载小程序. ref : ht ...

  4. [python] Python日志记录库loguru使用指北

    Loguru是一个功能强大且易于使用的开源Python日志记录库.它建立在Python标准库中的logging模块之上,并提供了更加简洁直观.功能丰富的接口.Logging模块的使用见:Python日 ...

  5. python基础-入门必备知识

    1 标识符 标识符是编程时使用的名字,用于给变量.函数.语句块等命名,Python 中标识符由字母.数字.下划线组成,不能以数字开头,区分大小写. 以下划线开头的标识符有特殊含义,单下划线开头的标识符 ...

  6. 实时系统Preempt RT与Xenomai之争！谁更主流，谁更实时？

    选择争论一直存在 大家知道EtherCAT是实时现场总线技术,当我们开发一款支持EtherCAT总线的控制器时,实时操作系统的选择不仅对于产品本身是最重要的一部分,而且对产品研发的整个过程也影响深远. ...

  7. [golang]在Gin框架中使用JWT鉴权

    什么是JWT JWT,全称 JSON Web Token,是一种开放标准(RFC 7519),用于安全地在双方之间传递信息.尤其适用于身份验证和授权场景.JWT 的设计允许信息在各方之间安全地. co ...

  8. Spark3学习【基于Java】5. Spark-Sql联表查询JOIN

    大数据场景下,联表远比微小型关系型数据库中使用的频繁.网上有句话: 传统数据库单机模式做Join的场景毕竟有限,也建议尽量减少使用Join. 然而大数据领域就完全不同,Join是标配,OLAP业务根本 ...

  9. fpga是什么

    FPGA(Field Programmable Gate Array) 现场可编程门阵列

  10. Java常见问题-多线程

    现在有 T1.T2.T3 三个线程,你怎样保证 T2 在 T1 执行完后执行,T3 在 T2 执行完后执行? 这个多线程问题比较简单,可以用 join 方法实现. 在 Java 中 Lock 接口比 ...