初次认识 Canvas
画布的概念
Canvas(画布)可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。画布在 HTML5 中是通过canvas
标签来表现,通过 JavaScript 提供的画布 API,我们可以绘制各种各样的图形。
在画布中绘制图形全都是通过 X 轴以及 Y 轴来完成,X 轴与 Y 轴共同组成二维空间点坐标,所有的点组成栅格。与我们一般理解的坐标系不同,画布的原点在左上角,横向是 X 轴;纵向是 Y 轴。如下图:
线性图形
二维画布中,图形分为线性图形和非线性图形,线性图形就是由一条条线段组成的图形。在日常生活中熟知的几何图形:矩形、线段、曲线、圆形等。
线性图形中有一个非常重要的概念——路径,线性图形时一条条线段组成,这里的线段在画布中被定义为路径。路径其实就是线段,绘制路径开头必须有 beginPath()。rect() 函数绘制的矩形是特殊的,它可以不用 beginPath() 起头。所有线性图形在定义好其实点、结束点等一系列操作之后必须调用 stroke() 函数,例如:
ctx.rect(20, 20, 160, 200);
ctx.stroke();
非线性图形
与线性图形相反的就是非线性图形,二维画布中除了可以表示简单的几何图形以外,还可以把图片绘制进画布中,并且还可以操作像素点来绘制图形。非线性图形不需要使用 beginPath() 来开头。
画布的 API
在 JavaScript 世界中,所有的 HTML 标签的顶层接口都是 HTMLElement 来表示,这个接口用来描述标签们公共属性和方法。AudioContext 用于描述 audio 标签,并继承自 HTMLElement。
HTMLCanvasElement
HTMLCanvasElement 继承自 HTMLElement。HTMLElement 提供了 getContext(),用于获取二维画布、三维画布。二维画布的对象是 CanvasRenderingContext2D,其提供了大量的属性和方法来完成图形的绘制。
let canvas = document.getElementById('canvas');
console.dir(canvas);
打印 canvas 标签,原型是 HTMLCanvasElement:
CanvasRenderingContext2D
CanvasRenderingContext2D 对象可为画布提供 2D 渲染上下文。它用于绘制形状,文本,图像和其他对象。
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
console.dir(ctx);
获取 CanvasRenderingContext2D:
属性
属性名 | 属性值 | 描述 |
---|---|---|
fillStyle | rgba、rgb、hex | 填充颜色 |
strokeStyle | rgba、rgb、hex | 路径颜色 |
lineCap | "butt" "round" "square" | 路径两端样式 |
lineJoin | "bevel" "round" "miter" | 路径连接处的样式 |
lineWidth | 数值类型 | 路径宽度 |
textAlign | "start" "left" "center" "end" "right" | 文本以 Y 轴为准的排列方式 |
textBaseline | "top" "bottom" "middle" "alphabetic" "hanging" | 文本以 X 轴为准的排列方式 |
font | 符合 CSS font 语法 | 设置文本字体样式 |
方法
初次认识 Canvas的更多相关文章
- canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记(上篇)-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线
[上篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- Canvas坐标轴中的Y轴距离是X轴的两倍
如题,相信很多人在初次玩canvas的时候会出现这样的情况,跟着教程走的情况下,诶 怎么画出来的东西,不怎么对劲啊,,,ԾㅂԾ,,!!!!!先上代码 <!DOCTYPE html> < ...
- canvas drawImage图片不显示问题
初次学习canvas,用来做笔记记录下遇到的问题及解决方案 这里是要将一张图片写到canvas里,按照网上搜索,初写了段代码,可是却没显示,以为是路径问题,不能跨域名使用,后来改为相对路径后,仍然无效 ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- Canvas 笔记目录
Canvas 基础笔记 初次认识 Canvas Canvas 线性图形(一):路径 Canvas 线性图形(二):圆形 Canvas 线性图形(三):曲线 Canvas 线性图形(四):矩形 Canv ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
随机推荐
- React设置proxy后依旧报CROS错误
1.判断表单数据是否为后端接收的类型 POST GET2.axios自动转换问题 手动添加标头这份表单数据包括了files (二进制数据)而标头显示是JSON格式 不符 所以报CROS 更多文章请移步 ...
- java中关于while(true)的理解
java中while(true)的理解: while(true)作为无限循环,经常在不知道循环次数的时候使用,并且需要在循环内使用break才会停止,且在run()方法中基本都会写while(true ...
- 深入C++03:面向对象
面向对象 类和对象.this指针 不用做太多笔记,都可以看初识C++的笔记: 记住:声明后面都要加":",比如声明方法和变量还有class结束的地方:而实现函数出来的地方是不需要加 ...
- 入坑KeePass(二)重置keepass设置
保留好.kdbx和密钥文件,软件的文件可以删除掉,重新下载并解压设置就恢复默认了
- 使用PowerShell校验文件MD5
更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2021年7月14日. 方法1:使用Get-FileHash命令 (Get-FileHash ".\SQLSer ...
- word-制作三线表
找一个表格或插入一个表格, 找到 [设计] [新建表格样式] [将格式应用于: 整个表格] 点击"框线设置"按钮,在弹出的下拉菜单中分别选择 [上框线] 和 [下框线],然后分别设 ...
- gulp入门第一课你需要注意的
安装 1.首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp. npm install -g gulp 2.初始化项目. npm init 3.如果想在安装的时候把gulp写进项目p ...
- js 表面学习 - 认识函数
JavaScript 函数语法 JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 (). 函数名可包含字母.数字.下划线和美元符号(规则与变量名相同). 圆括号可包 ...
- linux shell的配置文件执行顺序
shell配置文件的作用:初始化环境变量.设置命令提示符.指定系统命令路径等 shell配置文件分类: (1)系统级别配置文件: /etc下,比如/etc/profile./etc/bashrc (2 ...
- 《ASP.NET Core 6框架揭秘》样章发布[200页/5章]
作为<ASP.NET Core 3 框架揭秘>的升级版,<ASP.NET Core 6框架揭秘>不仅针对ASP.NET Core 6的新特性进行了修订,并添加了若干原来没有的内 ...