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. scab2

    package com.cmb.cox.utils;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;im ...

  2. vue项目中一些常用的插件

    @riophae/vue-treeselect:带选择的树组件 https://vue-treeselect.js.org/ ele-calendar:日历组件 https://www.npmjs.c ...

  3. python logging日志没有写入到指定文件,写到其他项目的日志文件

    背景: 项目A为主框架项目,使用到了项目B的方法 项目A.B均有封装好的日志方法,且均在封装好的日志文件里面,增加了logger = MyLogger().info,其他文件要使用日志时,引入logg ...

  4. ClickHouse介绍（三）MergeTree系列表引擎

    MergeTree系列表引擎 ClickHouse中最核心的引擎当属MergeTree系列引擎,其中基础表引擎为MergeTree,常用的表引擎还有ReplacingMergeTree.Summing ...

  5. Android Framework：如何让 App 拿到Power key 值

    Android app:如何让 App 拿到Power key 值 原文(有删改):https://blog.csdn.net/qq_37858386/article/details/10383566 ...

  6. Android 7 修改启动动画和开机声音

    背景 在修改开机音量的时候,发现找不到对应的声音功能调用. 因此了解了一下安卓的开机声音是如何实现的. 安卓4~安卓7 都可以这么做. 参考: https://blog.csdn.net/chen82 ...

  7. 复习 - es6语法

    这几天电脑有点问题,一直在弄,而且论文也逼近了也在时间弄那个 ,前面node有一个大项目,已经做完了,我现在是准备把上次复习断下的继续复习一直到这个项目,然后就开始vue了. 1. 首先是函数的一个进 ...

  8. test20230824总结

    A 怎么是重构树板子,放在图上都是水题. B 考场上只打了一个暴力,赛后发现似乎是很可做的 C 是一个考察状态设计的 dp 以后要多刷 D 是一道数据结构优化 dp 考场上写出来了却因为空间问题挂了 ...

  9. MinIO使用记录

    探索MinIO:高性能.分布式对象存储解决方案 注:本文除代码外多数为AI生成 最近因为有项目需要换成Amazon S3的云存储,所以把之前做过的minio部分做一个记录,后面也会把基于这版改造的S3 ...

  10. Redis学习篇

    Redis 能用来做什么? 01 缓存 Redis 的最常用的用例是缓存,以加快网络应用的速度.在这种用例中,Redis 将经常请求的数据存储在内存中.它允许网络服务器频繁访问的数据.这就减少了数据库 ...