绘制矩形边框，和填充不同的是绘制使用的是strokeRect， 和strokeStyle实现的

绘制路径

绘制路径的作用是为了设置一个不规则的多边形状态

路径都是闭合的，使用路径进行绘制的时候需要既定的步骤：

  1. 需要设置路径的起点

  2. 使用绘制命令画出路径

  3. 封闭路径

  4. 填充或者绘制已经封闭路径的形状

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button id="btn" style="width: 50px;height: 50px;background-color: red;" >

        清屏

    </button>

    <canvas id="context" width="500" height="600">当前的浏览器版本不支持，请升级浏览器</canvas>

    <script >

        const dom  = document.querySelector("#context");

        // console.log(dom.getContext);

        if(!dom.getContext) {

            alert("当前浏览器不支持")

        }

        var btn = document.querySelector("#btn");

        const ctx = dom.getContext("2d");  // 获取2D上下文

        if(ctx != null) {

            // 创建一个路径

            ctx.beginPath()

            ctx.moveTo(100,100);  // 需要设置路径的起点

            ctx.lineTo(200,200);

            ctx.lineTo(400,200);

            ctx.lineTo(400,100);  // 使用绘制命令画出路径

            ctx.closePath();  // 封闭路径

             ctx.strokeStyle = 'red';

            ctx.stroke();

            ctx.fillStyle = "blue";

            ctx.fill();  // 填充或者绘制已经封闭路径的形状

        }

        btn.onclick = () => {

            ctx.clearRect(0,0,600,600);

        }

    </script>

</body>

</html>

总结我们要绘制一个图形，要按照顺序

  1. 开始路径ctx.beginPath()
  2. 移动绘制点ctx.moveTo(x, y)
  3. 描述绘制路径ctx.lineTo(x, y)
  4. 多次描述绘制路径ctx.lineTo(x, y)
  5. 闭合路径ctx.closePath()
  6. 描边ctx.stroke()
  7. 填充ctx.fill()

此时我们发现之前我们在学习绘制矩形的时候使用的是fillRect和strokeRect，但是实际上fill和stroke也是具有绘制填充功能的

stroke(): 通过线条来绘制图形轮廓。

fill(): 通过填充路径的内容区域生成实心的图形。

渲染图片

// 导入图片

if(ctx !== null) {

    // 第一步是创建一个image元素

    let image:HTMLImageElement = new Image()

    // 用src设置图片的地址

    image.src = "image/test1.png"

    // 必须要在onload函数内绘制图片，否则不会渲染

    image.onload = function() {

        ctx.drawImage(image, 100, 100)

    }

}

canvas是可以进行变形的，但是变形的不是元素，而是ctx，ctx就是整个画布的渲染区域，整个画布在变形，我们需要在画布变形前进行保存和恢复：

  • save()：保存画布（canvas）的所有状态。
  • restore()：save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。

html5新标签 画布 canvas 替代了 flash的更多相关文章

  1. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  2. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

  3. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  4. 【HTML5】如何处理HTML5新标签的浏览器兼容版问题

    HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...

  5. HTML5新标签 w3c

    w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 <artical> 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...

  6. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  7. 让IE6,7,8支持HTML5新标签的方法

    很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...

  8. html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  9. 【29】html5新标签有哪些？

    [29]html5新标签有哪些? canvas svg video audio [01]article(IE8不支持) [01]details [02]aside(IE8不支持) [03]header ...

  10. HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5？

    HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...

随机推荐

  1. 银河麒麟V10高级服务器编译安装pg13.4

    安装postgres依赖 yum install -y openssl openssl-devel pam pam-devel libxml2 libxml2-devel libxslt libxsl ...

  2. Springboot + Vue ElementUI 实现MySQL可视化

    一.功能展示: 效果如图: DB连接配置维护:   Schema功能:集成Screw生成文档,导出库的表结构,导出表结构和数据 表对象操作:翻页查询,查看创建SQL,生成代码 可以单个代码文件下载,也 ...

  3. 制作Linux系统的启动盘

    我不是没有试过软碟通制作启动盘 在写入U盘的选项确认的时候,盘区不支持NTFS!? 另外什么大白菜和老毛桃这样的根本就不支持Linux镜像加载 还是百度的这个靠谱 https://jingyan.ba ...

  4. 从.net开发做到云原生运维(六)——分布式应用运行时Dapr

    1. 前言 上一篇文章我们讲了K8s的一些概念,K8s真的是带来了很多新玩法,就像我们今天这篇文章的主角Dapr一样,Dapr也能在K8s里以云原生的方式运行.当然它也可以和容器一起运行,或者是CLI ...

  5. 《Python数据可视化之matplotlib实践》 源码 第一篇 入门 第一章

    最近手上有需要用matplotlib画图的活,在网上淘了本实践书,发现没有代码,于是手敲了一遍,mark下. 第一篇    第一章 图1.1 import matplotlib.pyplot as p ...

  6. 【转载】 5:0!AI战胜人类教官，AlphaDogfight大赛落幕

    原文:https://baijiahao.baidu.com/s?id=1675621109599102721&wfr=spider&for=pc ------------------ ...

  7. 关于“内网穿透”的一些知识（续3）—— NAT类型判断

    前文: 关于"内网穿透"的一些知识(续2)-- 端口预测 ------------------------------------------- 本文是对前面几篇文章的补充.这里要 ...

  8. gym库中from gym.wrappers import FlattenObservation的理解

    看代码的过程中看到有这样的调用: from gym.wrappers import FlattenObservation if sinstance(env.observation_space, gym ...

  9. 增强用户体验：2个功能强大的.NET控制台应用帮助库

    前言 对于.NET开发者而言,构建控制台应用程序时,如何提升用户交互的流畅性和满意度,是一个持续探索与优化的话题.今天大姚给大家分享2个功能强大的.NET控制台应用帮助库,希望可以帮助大家能够快速的构 ...

  10. [rCore学习笔记 023]任务切换

    导读 还是要先看官方手册. 学过DMA的同志可能比较好理解,一句话, 释放CPU总线 : 如果把应用程序执行的整个过程进行进一步分析,可以看到,当程序访问 I/O 外设或睡眠时,其实是不需要占用处理器 ...