canvas 相关基础汇总简记

叁歲伎倆 2022-03-12 03:38 336阅读 0赞

## 零散的canvas知识点简记： ##

### 1.   canvas 默认情况下，即不设置宽高的情况下，宽度 300  高度 150 ； ###

**2**.     **通过 判断canvas的.getContext 属性是否存在，作为浏览器不支持canvas的判断；**

**        getContext 是一个方法，或者说是一个函数，canvas通过这个函数获取canvas的绘图环境；**

**        以下面的代码为例，我们通过 document.getElementById() 获取canvas对象节点；**

**        但是浏览器是否支持canvas呢，我们通过 这个canvas 节点是否可以获取到 getContext 来判断；**

**         如果为 true ，则存在getContext 这个方法，说明浏览器支持canvas，否则不支持，我们需要另外的处理；**

<script>
    		var obj = document.getElementById("test");
    		if(obj.getContext){
    			var ctx = obj.getContext('2d');
    			ctx.fillStyle = "#f9f9f9";
    			ctx.fillRect(10,10,50,50);
    		}
    </script>

3. 道听途说，一开始 canvas 是苹果在 safari 中实现的，后来慢慢的被接受作为标准了，直到现在几乎所有的浏览器都支持了，

但是也有个别的不支持；

4.  canvas 绘图环境中，也就是canvas的区域范围内，元素的定位是参照原点的，也就是 左上角 的（0,0）；

当然，原点的位置也是可以修改的，不是固定不变的；

5.  canvas可以绘制图形，canvas提供了绘制矩形的原生方法，也就是生成矩形的函数，我们只需要调用即可；

fillRect（x,y,width,height）

stroke ( x, y, width ,height )

clearRect( x, y, width , height)

这个三个函数的参数都是一样的，前两个设定位置，后面两个是宽度和高度；

但是这个三个方法绘制的矩形是有区别的，原理不一样；

当然还有其他的绘制矩形的方法，比如路径等；

6.  未完...

发表评论取消回复

表情：

评论列表（有 0 条评论，336人围观）

还没有评论，来说两句吧...

相关阅读

相关 brew相关汇总

文章目录 1. brew install xxx 软件默认存放地址 2. brew install xxx 总会自动更新，卡在update 3. bre

喜欢ヅ旅行/ 2024年03月30日 17:29/ 0 赞/ 61 阅读

相关 unity | Game界面Canvas模式和相关的相机基础

一、Game界面 <一>、Game界面到底显示的是什么呢？答案：Game界面显示的是相机里看见的东西 ![abdac2b64f9940f1aef7d4ecbdd7d77

骑猪看日落/ 2023年09月26日 11:06/ 0 赞/ 115 阅读

相关 git相关汇总

1. 主机中打印出公钥 `id_rsa.pub` cat ~/.ssh/id\_rsa.pub 2. 修改打印时间 git config log.

╰半橙微兮°/ 2023年08月17日 16:14/ 0 赞/ 128 阅读

相关 canvas基础归纳

基础知识 beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。 closePath()闭合路径之后图形绘制命令又重新指向到上下文中。 s

男娘i/ 2023年06月18日 06:52/ 0 赞/ 25 阅读

相关机器学习中优化相关理论基础汇总

机器学习中优化相关理论基础汇总 2019年04月30日 13:14:53 [feilong\_csdn][feilong_csdn] 阅读数 131更多分类专栏： [

待我称王封你为后i/ 2023年06月04日 02:49/ 0 赞/ 19 阅读

相关 Canvas学习笔记——Canvas基础用法

Canvas是HTML5中的新增API，提供了一个通过Javascript和HTML的`<canvas>`元素来绘制图形。Canvas API主要聚焦于2D图形。`<canva

系统管理员/ 2022年09月04日 10:56/ 0 赞/ 291 阅读

相关 Tmux_基础命令_简记

新建tmux窗口　`tmux new -s name` 退出tmux窗口　`Ctrl 和 B　同时按住，松开后，立即按 D` 连接tmux窗口　`tmux attach

你的名字/ 2022年09月01日 07:58/ 0 赞/ 183 阅读

相关简记ReNet

ResNet 论文给出了Resnet有3中类型，ResNet50\[res3 res4 res6 res3\]，ResNet101\[res3 res4 res23 res3

客官°小女子只卖身不卖艺/ 2022年07月13日 00:52/ 0 赞/ 207 阅读

相关并发相关技术简记链接

TCC 分布式事务框架 Try - Confirm - Cancel [https://www.liangzl.com/get-article-deta

超、凢脫俗/ 2022年04月24日 07:50/ 0 赞/ 216 阅读

相关 canvas 相关基础汇总简记

零散的canvas知识点简记： 1. canvas 默认情况下，即不设置宽高的情况下，宽度 300 高度 150 ； 2. 通过判断ca

叁歲伎倆/ 2022年03月12日 03:38/ 0 赞/ 337 阅读