Canvas入门01-基础知识
定义一个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-基础知识的更多相关文章
- 爬虫入门一 基础知识 以及request
title: 爬虫入门一 基础知识 以及request date: 2020-03-05 14:43:00 categories: python tags: crawler 爬虫整体概述,基础知识. ...
- 2.Docker容器学习之新生入门必备基础知识
0x02 Docker 核心概念 描述:Docker的三大核心概念镜像/容器和仓库, 通过三大对象核心概念所构建的高效工作流程; 1.镜像 [image] 描述:images 类似于虚拟机镜像,借鉴了 ...
- 1.Docker容器学习之新生入门必备基础知识
0x00 Docker 快速入门 1.基础介绍 描述:Docker [ˈdɑ:kə(r)] 是一个基于Go语言开发实现的遵循Apache 2.0协议开源项目,目标是实现轻量级的操作系统虚拟化解决方案: ...
- 01慕课网《vue.js2.5入门》——基础知识
前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...
- Nginx入门篇-基础知识与linux下安装操作
我们要深刻理解学习NG的原理与安装方法,要切合实际结合业务需求,应用场景进行灵活使用. 一.Nginx知识简述Nginx是一个高性能的HTTP服务器和反向代理服务器,也是一个 IMAP/POP3/SM ...
- React 基础入门，基础知识介绍
React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...
- hadoop入门必备基础知识
1.对Linux 系统的要求 会基本的命令: (1)知道root用户 (2)ls命令会查看文件夹内容 (3)cd命令等2.Java 的要求 ...
- SQLAlchemy 快速入门、基础知识
SQLAlchemy 是Python 编程语言下的一款开源软件.提供了SQL工具包及对象关系映射(ORM)工具. ORM, 全称Object Relational Mapping, 中文叫做对象关系映 ...
- Android宝典入门篇-基础知识
今天跟大家分享的是我学android时的笔记.以前搞net很多年了,现在还在搞这.本着活到老学到老抽了点时间学习了下android.android网上有很多的视频教程,当时对于我这样以前不了解java ...
- JavaWeb零基础入门-01 基础概念说明
一.序言 从学校出来到实习,发现学校学的东西太过基础,难于直接运用于工作中.而且工作中,现在都以web开发为主,学校开了web开发相关课程.自己学的不够深入,所以本人自学JavaWeb开发,介于学习巩 ...
随机推荐
- Python之网路编程进程理论基础
背景知识 顾名思义,进程即一个软件正在进行的过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老的也是最重要的抽象概念之一.操作系统的其他 ...
- Python之网路编程之粘包现象
一.什么是粘包 须知:只有TCP有粘包现象,UDP永远不会粘包 粘包不一定会发生 如果发生了:1.可能是在客户端已经粘了 2.客户端没有粘,可能是在服务端粘了 首先需要掌握一个socket收发消息的原 ...
- vue - 登录验证与权限控制
描述具体问题 需求 业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面: 多个业务系统之间要实现单点登录,即在一个系统或应用已登录的情况下,再访问另一个系统时不需 ...
- 删除操作——str.subString(0,str.length()-1)
subString是String的一个方法,格式为: public String substring(int beginIndex, int endIndex) 返回一个新字符串,它是此字符串的一个 ...
- 【深入理解CLR】2:细谈值类型的装箱和拆箱
装箱 总所周知,值类型是比引用类型更“轻型”的一种类型,因为它们不作为对象在托管堆中分配,不会被垃圾回收,也不通过指针来引用.但在许多情况下,都需要获取对值类型的一个实例的引用.例如,假定要创建一个A ...
- 树状数组（Binary Indexed Tree）
树状数组(Binary Indexed Tree,BIT) 是能够完成下述操作的数据结构. 给一个初始值全为 0 的数列 a1, a2, ..., an (1)给定 i,计算 a1+a2+...+ai ...
- BZOJ1491 Red is good
题目链接:Click here Solution: 考虑设\(f(i,j)\)表示当前还有\(i\)张红牌,\(j\)张黑牌时的期望收益 易得状态转移方程:\(f(i,j)=\frac{i}{i+j} ...
- （76）深入浅出Mqtt协议
物联网(Internet of Things,IoT)时代机器之间(Machine-to-Machine,M2M)的大规模沟通需要发布/订阅(Publish/Subscribe)模式,轻量级.易扩展的 ...
- 和他人一起管理GitHub仓库
和他人一起管理 GitHub 仓库方法 打开一个项目的仓库 同意好之后在项目中要添加 README.md 文件(重要) 要让别人也可以使用 master 主线 在上传代码前,一定要使用 git 指令 ...
- 阶段3 1.Mybatis_10.JNDI扩展知识_2 补充-JNDI搭建maven的war工程
使用骨架 src下创建test目录 再新建java和resources两个Directory test下面创建java java的目录,让他作为源码的跟目录 test下的java文件夹 选择 完成之后 ...