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. Jenkins构建项目遇到的问题总结

    4.2.1  在Windows下,Jenkins运行python项目 https://www.jianshu.com/p/f6edbaaa8a0d 4.2.2  配置不同类型的项目的操作步骤 http ...

  2. ClickHouse特性及底层存储原理

    ClickHouse的特性 ClickHouse是一款MPP架构的列式存储数据库,但MPP和列式存储并不是什么"稀罕"的设计.拥有类似架构的其他数据库产品也有很多,但是为什么偏偏只 ...

  3. openGauss集群主库出现流复制延迟告警

    问题描述:环境是openGauss 5.0集群,在一次意外重启数据库之后.收到了一个主库的主从延迟告警,只有从库才能出现延迟,主库怎么会出现了告警延迟 告警信息: Status: Resolved H ...

  4. NXP i.MX 8M Mini的视频开发案例分享 (下）

    本文主要介绍i.MX 8M Mini的视频开发案例,包含基于GStreamer的视频采集.编解码.算法处理.显示以及存储案例,GigE工业相机测试说明,H.265视频硬件解码功能演示说明等. 注:本案 ...

  5. 四 黑马程序员-java面向对象(上)

    一.:面向对象 (1)面向对象:是基于面向过程的一种思想. 面向过程:以函数为基础,关注实现过程. 面向对象:以对象为基础,关注实现结果. (2)面向对象的思想特点: A:是一种更符合人们思考习惯的思 ...

  6. Spring Cloud微服务下如何配置I8n

    什么是I8n 国际化(I18n)指的是设计和开发产品的过程,使得它们能够适应多种语言和文化环境,而不需要进行大量的代码更改.这通常涉及到创建一个基础版本的产品,然后通过配置和资源文件来添加对不同语言和 ...

  7. 在Windows系统中解决端口占用问题

    在Windows系统中,你可以通过以下步骤查询并结束占用8001端口的进程: 查询占用8001端口的进程: 打开命令提示符(CMD)或者PowerShell,并执行以下命令:   netstat -a ...

  8. nodejs的服务器,用ffmpeg推流

    http://m.zhizuobiao.com/node/node-19061200018/ ffmpeg -list_devices true -f dshow -i dummyffmpeg -f ...

  9. innodb存储引擎了解

    mysql常用的存储引擎分为innodb和myisam 其中innodb具有支持事务,执行行级锁,支持MVCC,外键,自动增长列,崩溃恢复等特性.并且mysql在5.5.5之后是数据的默认存储引擎 文 ...

  10. 亚马逊 vpc 子网 路由表 互联网网关 弹性ip

    创建vpc,子网,路由表,互联网网关,弹性ip等网络资源 vpc和子网 创建互联网网关 附加到vpc 创建路由表 路由表编辑路由 此路由通过这个网关出去 编辑子网关联 保存关联 有关云主机 创建属于那 ...