初学 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的更多相关文章
- 嵌入式Linux学习笔记之第一阶段---基础篇
嵌入式Linux学习分五个阶段 第一阶段: 01嵌入式环境搭建初期 02C语言语法概述 03C语言内存操作 04c语言函数 05linux基础 06gun基础 第二阶段: 01-linux之io系统编 ...
- 2-STM32+W5500+GPRS物联网开发基础篇-基础篇学习的内容
https://www.cnblogs.com/yangfengwu/p/10936553.html 这次的基础篇为公开篇,将公开所有基础篇的资料和源码 现在说一下基础篇准备公开的内容:(大部分哈,要 ...
- 初学 Canvas <第一篇-基础篇>
本文摘自:兴趣部落大神(为你一生画眉)-讲一讲canvas究竟是个啥? HTML5 的标准已经出来好久了,但是似乎其中的 Canvas 现在并没有在太多的地方用到.一个很重要的原因是,Canvas 的 ...
- HTML5之Canvas绘图(一) ——基础篇
HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是 ...
- python学习第一天基础篇
学习背景:决定开始学习python之前,因为公司基本都是微软系统,所以很少碰到linux系统,机缘巧合接到了一个项目是使用shell对mysql进行backup,因为公司唯一的系统工程师是微软在行,对 ...
- SpringBoot图文教程「概念+案例 思维导图」「基础篇上」
有天上飞的概念,就要有落地的实现 概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例 每个知识点配套自测面试题,学完技术自我测试 本文初学向,所以希望文中所有的代码案例都能敲一遍 大哥大姐 ...
- Android应用开发基础篇(4)-----TabHost(选项卡)
一.概述 TabHost是一种用来显示标签的组件,不清楚?看一下来电通这个应用就知道了.这个组件用起来与其他组件不太一样,它需要继承TabActivity这个类,还有它的布局文件与我们平时用的也有些不 ...
- 使用Xamarin开发手机聊天程序 -- 基础篇(大量图文讲解 step by step,附源码下载)
如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!而且,Xamarin已经被微 ...
- 【ShaderToy】基础篇之谈谈点、线的绘制
写在前面 写前面一篇的时候,发现还是不够基础.因此打算增加几篇基础篇,从点线面开始,希望可以更好理解. 其实用Pixel Shader的过程很像在纸上绘画的过程.屏幕上的每一个像素对应了纸上的一个方格 ...
- 使用Xamarin开发即时通信系统 -- 基础篇(大量图文讲解 step by step,附源码下载)...
如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!而且,Xamarin已经被微 ...
随机推荐
- 【每日一题】【二分mid&贪心】2022年2月8日-NC163 最长上升子序列(一)
1.描述给定一个长度为 n 的数组 arr,求它的最长严格上升子序列的长度.所谓子序列,指一个数组删掉一些数(也可以不删)之后,形成的新数组.例如 [1,5,3,7,3] 数组,其子序列有:[1,3, ...
- 【Shell脚本案例】案例1:服务器系统配置初始化
〇.目录 一.背景 新购买10台服务器,并安装Linux系统 目的:对操作系统进行配置的初始化 二.需求 1.设置时区并同步时间 2.禁用selinux安全机制 3.关闭防火墙(清空防火墙的默认策略, ...
- Java中的反射机制及反射的优缺点
1. 反射的概念 反射 机制指的是,程序在运行时能够获取自身的信息.在 java 中只要给定类的名字,就能够获取类的所有属性和方法. 反射是 Java 中很多高级特性的基础,比如 注解.动态代理 以及 ...
- CGI、WSGI、uWSGI、ASGI……
在学习 Python Web 开发时候,可能会遇到诸如 uwsgi.wsgi 等名词,下面通过梳理总结,探究它们之间的关系. CGI CGI(Common Gateway Interface)通用网关 ...
- 后疫情办公时代——你需要的多人同步协同编辑Demo(可粘贴可撤销)
新冠病毒的疫情使得在线办公成为了一个常态,这使得在线文档成为了时下的热点.其中在线协同表格是在线文档的重要一个组成部分,纯前端表格在在线协同表格上有着得天独厚的优势:本身已经实现了单人操作在线文档的基 ...
- [python] 基于matplotlib_venn实现维恩图的绘制
文章目录 VENN DIAGRAM(维恩图) 1. 具有2个分组的基本的维恩图 Venn diagram with 2 groups 2. 具有3个组的基本维恩图 Venn diagram with ...
- Ynoi 数据结构题选做
Ynoi 数据结构题选做 前言 我将成为数据结构之神!坚持 lxl 党的领导,紧随 nzhtl1477(女装灰太狼1477)的脚步.无论过去.现在还是未来,分块始终是实现 data structure ...
- Jasypt与Apollo一起使用造成Apollo热更新失效问题分析
背景 近日业务同学反映在Apollo界面更改配置后, 服务中对应变量的值却没有改变 相关配置key定义如下: @ApolloJsonValue("${apollo.config.map:{} ...
- NET-async-await是否会创建新线程
title: .NET async/await是否会创建新线程 date: 2022-12-06 10:36:46 tags: - .NET 先上结论 CPU密集型操作,比如计算,如果不使用Task, ...
- P8796 [蓝桥杯 2022 国 AC] 替换字符
题面 给定一个仅含小写英文字母的字符串 \(s\) 和 \(m\) 次操作,每次操作选择一个区间 \([l_i,r_i]\) 将 \(s\) 的该区间中的所有字母 \(x_i\) 全部替换成字母 \( ...