1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>01-Canvas开篇</title>

 6     <style>

 7         *{

 8             margin: 0;

 9             padding: 0;

10         }

11         canvas{

12             background: red;

13         }

14     </style>

15 </head>

16 <body>

17 <!--1.在body中创建一个canvas标签-->

18 <!--

19 注意点

20 canvas标签有默认的宽度和高度

21 默认的宽度是300px

22 默认的高度是150px

23 -->

24 <canvas></canvas>

25 <script>

26     /*

27     1.什么是Canvas？

28     Canvas是H5新增的一个标签, 我们可以通过JS在这个标签上绘制各种图案

29     Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。

30     * */

31     // 2.通过js代码拿到canvas标签

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

33     // 3.从canvas标签中获取到绘图工具

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

35     // 4.通过绘图工具在canvas标签上绘制图形

36     // 4.1设置路径的起点

37     oCtx.moveTo(50, 50);

38     // 4.2设置路径的终点

39     oCtx.lineTo(200, 50);

40     oCtx.lineTo(200,100);

41     // 4.3告诉canvas将这些点连接起来

42     oCtx.stroke();

43 </script>

44 </body>

45 </html>

01-canvas体验的更多相关文章

  1. 01 - 快速体验 Spring Security 5.7.2 | 权限管理基础

    在前面SpringBoot 2.7.2 的系列文章中,已经创建了几个 computer 相关的接口,这些接口直接通过 Spring Doc 或 POSTMAN 就可以访问.例如: GET http:/ ...

  2. 讲解Canvas中的一些重要方法

    Canvas所提供的各种方法根据功能来看大致可以分为几类: 第一是以drawXXX为主的绘制方法: 第二是以clipXXX为主的裁剪方法: 第三是以scale.skew.translate和rotat ...

  3. 大家都能看懂的 canvas基础教程

    原文链接: http://www.shitu91.com/cms/canvasSub/index.html 01.canvas简单的认识 canvas 是html5提供给我们的一个绘图标签 默认大小 ...

  4. 用户体验报告（Echo）

    班级:软件工程1916|W 作业:项目Beta冲刺(团队) 团队名称:Echo 团队博客汇总 队员学号 队员姓名 个人博客地址 备注 221600136 张至锋 https://www.cnblogs ...

  5. tensorFlow（六）应用-基于CNN破解验证码

    TensorFlow基础见前博客 简介 传统的验证码识别算法一般需要把验证码分割为单个字符,然后逐个识别.本教程将验证码识别问题转化为分类的问题,实现对验证码进行整体识别. 步骤简介 本教程一共分为四 ...

  6. BIGO 如何做到夜间同时运行 2.4K 个工作流实例？

    点亮 ️ Star · 照亮开源之路 GitHub:https://github.com/apache/dolphinscheduler   ​ 精彩回顾 近期,BIGO 的大数据研发工程师许名勇在社 ...

  7. 基于 Web SDK 实现视频通话场景 | 声网 SDK 教程

    声网视频 SDK 被广泛应用于多种实时互动场景中,例如视频会议.视频通话.音视频社交.在线教育等.为了让刚刚接触声网 SDK 的开发者,可以更顺畅地实现基础的视频通话功能,我们基于声网 Web SDK ...

  8. Canvas之蛋疼的正方体绘制体验

    事情的起因 之前写了篇谈谈文字图片粒子化 I,并且写了个简单的demo -> 粒子化.正当我在为写 谈谈文字图片粒子化II 准备demo时,突然想到能不能用正方体代替demo中的球体粒子.我不禁 ...

  9. Canvas+Video打造酷炫播放体验

    一.简介 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元 ...

  10. 从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建

    项目演示 项目演示地址: 体验一下 项目源码: 项目源码 代码结构 本节做完效果 游戏主页面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD ...

随机推荐

  1. Freertos学习：03-任务

    --- title: rtos-freertos-03-任务 EntryName: rtos-freertos-03-task date: 2020-06-20 09:15:07 categories ...

  2. NXP i.MX 8M Plus工业开发板硬件说明书（ 四核ARM Cortex-A53 + 单核ARM Cortex-M7，主频1.6GHz）

    前  言 本文主要介绍创龙科技TLIMX8MP-EVM评估板硬件接口资源以及设计注意事项等内容. 创龙科技TLIMX8MP-EVM是一款基于NXP i.MX 8M Plus的四核ARM Cortex- ...

  3. 写给rust初学者的教程（一）：枚举、特征、实现、模式匹配

    这系列RUST教程一共三篇.这是第一篇,介绍RUST语言的入门概念,主要有enum\trait\impl\match等语言层面的东西. 安装好你的rust开发环境,用cargo创建一个空项目,咱们直接 ...

  4. Solo开发者社区-H5-Dooring, 开箱即用的零代码搭建平台

    Dooring-Saas 是一款功能强大,高可扩展的零代码解决方案,致力于提供一套简单方便.专业可靠.无限可能的页面可视化搭建最佳实践.(Solo社区 投稿) 功能特点 可扩展, Dooring 实现 ...

  5. 开源免费又好用的中式数据报表:UReport2是一款高性能的架构在Spring之上纯Java报表引擎，通过迭代单元格可以实现任意复杂的中国式报表。

    北润乾.南帆软,数加发力在云端. uReport 身何安?中式报表真开源. 报表江湖之中,uReport安身立命的产品品类定位是什么? 说来很简单,uReport的价值在于填补了这样一个市场空白:开源 ...

  6. TypeScript 学习笔记 — 类型推断和类型保护（十一）

    目录 类型推断 1.赋值推断 2.返回值推断 3.函数推断(反向推断) 4.属性推断 5.类型反推 6.索引访问操作符 7.类型映射 类型保护 1.typeof 类型保护 2.instanceof 类 ...

  7. [oeasy]python0081_[趣味拓展]ESC键进化历史_键盘演化过程_ANSI_控制序列_转义序列_CSI

    光标位置 回忆上次内容 上次了解了 新的转义模式 \033 逃逸控制字符 escape 这个字符 让字符串 退出标准输出流 进行控制信息的设置 可以设置 光标输出的位置       ​   添加图片注 ...

  8. [oeasy]python0075_删除变量_del_delete_variable

    删除变量 回忆上次内容 上次我们研究了字节序 字节序有两种   符号 英文名称 中文名称 < little-endian 小字节序 > big-endian 大字节序 字节序 用来 明确 ...

  9. .NET Core 3.x 基于Autofac的AOP缓存

    一.依赖包 二.定义一个简单的缓存接口 /// <summary> /// 简单的缓存接口,只有查询和添加,以后会进行扩展 /// </summary> public inte ...

  10. Python在linux系统和window系统相对路径导致找不到文件报错

    文件路径 project1 -dir1 --test1.py -dir2 --test2.text -main.py test1.py from pathlib import Path "& ...