定义一个canvas，直接在Html中使用canvas便签即可。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

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

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

      body {

          background: #ddd;

      }

      #canvas {

          margin: 10px;

          padding: 10px;

          background: #fff;

          border: thin inset #aaa;

      }

     </style>

 </head>

 <body>

     <canvas id="canvas" width="600" height="300">

         Canvas not supported

     </canvas>

     <script src="./example.js"></script>

 </body>

 </html>

　　canvas 元素内容部分所含的文本，仅在浏览器不支持canvas 元素的时候，才会显示该内容。这种文本叫做“后备内容”（fallback content）。

使用canvas画图：

 var canvas = document.getElementById('canvas');

 var context = canvas.getContext('2d');

 context.font = '38pt Arial';

 context.fillStyle = 'cornflowerblue';

 context.strokeStyle = 'blue';

 context.fillText('Hello Canvas', canvas.width/2 - 150, canvas.height/2 + 15);

 context.strokeText('Hello Canvas', canvas.width/2 - 150, canvas.height/2 + 15);
 

显示效果如下：　　

使用CSS设置 canvas 的大小和设置 canvas 的属性有什么区别？

canvas 元素实际上有两套尺寸。一个是元素本身的大小，还有一个是元素绘图表面（drawing surface）的大小。

当设置元素的 width 和 height 属性时，实际上是同时修改了元素本身的大小和元素绘图表面的大小。如果是通过CSS 设置，只会改变元素本身的大小，而不会影响绘图表面，还是默认的 300 * 150 px，这会影响坐标轴的计算。

小结：

（1）使用 document.getElementById() 来获取指向 canvas的引用

（2）在 canvas 对象上调用 getContext('2d') 来获取绘图上下文（也叫绘图环境变量），d 必须小写

（3）使用 context 对象在 canvas 元素上进行绘制。

（4）在canvas 元素上设置 width 和 height 属性来设置 canvas 的 size，默认的 canvas 元素大小是 300*150 px

Canvas入门01-基础知识的更多相关文章

  1. 爬虫入门一 基础知识 以及request

    title: 爬虫入门一 基础知识 以及request date: 2020-03-05 14:43:00 categories: python tags: crawler 爬虫整体概述,基础知识. ...

  2. 2.Docker容器学习之新生入门必备基础知识

    0x02 Docker 核心概念 描述:Docker的三大核心概念镜像/容器和仓库, 通过三大对象核心概念所构建的高效工作流程; 1.镜像 [image] 描述:images 类似于虚拟机镜像,借鉴了 ...

  3. 1.Docker容器学习之新生入门必备基础知识

    0x00 Docker 快速入门 1.基础介绍 描述:Docker [ˈdɑ:kə(r)] 是一个基于Go语言开发实现的遵循Apache 2.0协议开源项目,目标是实现轻量级的操作系统虚拟化解决方案: ...

  4. 01慕课网《vue.js2.5入门》——基础知识

    前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...

  5. Nginx入门篇-基础知识与linux下安装操作

    我们要深刻理解学习NG的原理与安装方法,要切合实际结合业务需求,应用场景进行灵活使用. 一.Nginx知识简述Nginx是一个高性能的HTTP服务器和反向代理服务器,也是一个 IMAP/POP3/SM ...

  6. React 基础入门，基础知识介绍

    React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...

  7. hadoop入门必备基础知识

    1.对Linux 系统的要求        会基本的命令:        (1)知道root用户        (2)ls命令会查看文件夹内容        (3)cd命令等2.Java 的要求    ...

  8. SQLAlchemy 快速入门、基础知识

    SQLAlchemy 是Python 编程语言下的一款开源软件.提供了SQL工具包及对象关系映射(ORM)工具. ORM, 全称Object Relational Mapping, 中文叫做对象关系映 ...

  9. Android宝典入门篇-基础知识

    今天跟大家分享的是我学android时的笔记.以前搞net很多年了,现在还在搞这.本着活到老学到老抽了点时间学习了下android.android网上有很多的视频教程,当时对于我这样以前不了解java ...

  10. JavaWeb零基础入门-01 基础概念说明

    一.序言 从学校出来到实习,发现学校学的东西太过基础,难于直接运用于工作中.而且工作中,现在都以web开发为主,学校开了web开发相关课程.自己学的不够深入,所以本人自学JavaWeb开发,介于学习巩 ...

随机推荐

  1. 如何将vim打造成Linux下的source insight

    编写者:龙诗科 邮箱:longshike2010@163.com 2016-01-06 众所周知,windows下的source insight是阅读项目代码的神器,其神奇之处在于可以根据当前鼠标所指 ...

  2. maven参数详解

    setting.xml主要用于配置maven的运行环境等一系列通用的属性,是全局级别的配置文件:而pom.xml主要描述了项目的maven坐标,依赖关系,开发者需要遵循的规则,缺陷管理系统,组织和li ...

  3. Eclipse中配置Python插件

    1.点击Window --->  preferences ,左边的标题栏找到Pydev 2. 在Pydev里找到含有Python的选项,点击,在右侧New,弹出框中找到Python的安放目录下的 ...

  4. 便捷删除QQ空间说说

    用Chrome打开QQ空间说说(心情),按F12,在Console里面粘贴以下代码,按回车 var delay = 1000; function del() { document.querySelec ...

  5. Linux shell 下简单的进度条实现

    Linux shell 下简单的进度条实现 [root@db145 ~]# cat print_process.sh function Proceess(){ spa='' i= ] do print ...

  6. hibernate中save()、get()、load()、update()、saveorupdate()、merge()等方法

    1.save()方法 直接传个user对象 session.save(user); 2.get()方法和load()方法 get(): 传id        session.get(UserInfo. ...

  7. luoguP1255 数楼梯 x

    P1255 数楼梯 题目描述 楼梯有N阶,上楼可以一步上一阶,也可以一步上二阶. 编一个程序,计算共有多少种不同的走法. 输入输出格式 输入格式: 一个数字,楼梯数. 输出格式: 走的方式几种. 输入 ...

  8. python调用Opencv库和dlib库

    python是一门胶水语言,可以调用C++编译好的dll库 python调用opencv-imggui.dll文件 https://www.cnblogs.com/zhangxian/articles ...

  9. mac 的 quickTime Player 设置播放速度

    按住 option 点击 下一个视频的图标每次调整幅度为0.1,大于 1.9 声音会消失. 按住 option+J 调慢播放速度 option+L 调快播放速度 每次调整幅度为0.1

  10. （49）LINUX应用编程和网络编程之四 Linux进程全解

    补充: 1.  C程序的执行过程: C编译器调用链接器,链接器设置可执行程序文件的启动起始地址(启动例程),启动例程获得内核传递来的 命令行参数和环境变量值,为调用main函数做准备.[实际上该启动例 ...