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. metal invalid pixel format xx

    这个时候要考虑CAMetalLayer.pixelFormat是否设置设置正确,虽然MTLPixelFormat有很多枚举值,但是CAMetalLayer支持的也就只有五个: MTLPixelForm ...

  2. 纯代码搭建iOS三级结构（UITabbarController+UINavigationController+UIViewController）

    声明:这里所指的三级结构不是网上百度中所经常提及的三级框架或者MVC模式,而是指UITabbarController+UINavigationController+UIViewController. ...

  3. Spring之webMvc异常处理

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

  4. 实验12.dhcp服务器实验

    实验12.dhcp服务器实验 测试DHCP服务的可用性 实验组 交换机配置 R1 interface GigabitEthernet0/0/0 ip address 192.168.1.1 255.2 ...

  5. [HTTP] GET请求的body能否携带数据？

    在与后端对接口的时候,有个GET分页接口,需要传pageSize,currentPage等参数,这种不敏感的数据其实直接拼接在url上面就好了,但是后端可能出于开发习惯就把接口的这些参数放在了body ...

  6. Excel 更改数据同步更新到Mysql数据库

    刚上班,领导给我提出一个需求,想要每天更新Mysql数据库中的原有商品订单状态,添加新的商品订单状态.因为公司目前的数据库只能添加数据,不能更改数据,想要更改原有的数据,只能将原有的数据清空,再导入新 ...

  7. Redis 高阶应用

    生成全局唯一 ID 全局唯一 ID 需要满足以下要求: 唯一性:在分布式环境中,要全局唯一 高可用:在高并发情况下保证可用性 高性能:在高并发情况下生成 ID 的速度必须要快,不能花费太长时间 递增性 ...

  8. SpringCloud连接远程nacos报错，一直提示连接本地的localhost:8848

    application.properties spring.cloud.nacos.discovery.server-addr=xxx.xxx.xxx.xxx:8848 spring.applicat ...

  9. pytest批量执行多个测试文件(批量执行一个文件夹下的所有测试用例)

    图片 代码 #!/usr/bin/env python # @File : test_runall.py import pytest import os # path = os.path.dirnam ...

  10. PHP进阶

    只是简要说明起原理和用法,具体可以百度 abstract 抽象类 抽象类是指在 class 前加了 abstract 关键字且存在抽象方法,不带{},如public function test() i ...