JavaScript原理的相关内容

文章 2022-05-26 来自：开发者社区

JavaScript 中 typeof 实现原理

介绍Try ittypeof 操作符返回一个字符串，表示未经计算的操作数的类型。typeof 42; // "number" typeof 'cellinlab'; // "string" typeof true; // "boolean" typeof undeclaredVariable; // "undefined"描述typeof 可能的返回值。类型结果Undefinedundef...

文章 2022-05-13 来自：开发者社区

游戏其实就是在动画的基础上添加了控制，也就是添加键盘和鼠标的事件监听。添加事件的方法前面已经学过，添加键盘事件和普通节点对象的键盘事件相同，只是canvas中的鼠标事件需要做一些处理。#### 鼠标事件在鼠标事件中，鼠标指针所处位置的坐标是非常重要的属性，鼠标事件中只能获取相对于屏幕左上角和相对浏览器文档左上角的坐标，而canvas中使用的是自己的坐标系，因此需要将获取的坐标转换为canvas中....

文章 2022-05-13 来自：开发者社区

《JS原理、方法与实践》- canvas动画

动画是由多幅连续的图片组成，按顺序切换不同的图片给人一种动画的感觉，切换的速度越快动画的感觉越真实，当速度达到1秒24幅图片的时候，人的肉眼就无法分辨了，这就是所说的24帧。canvas中的动画其实就是循环执行擦除和绘制的操作，并且一般会在操作之前保存环境，操作之后恢复环境。使用canvas制作动画由两个关键点：循环执行，绘制每次显示的图片。循环执行主要有两种方式，一种是使用前面所学过的setI....

文章 2022-05-13 来自：开发者社区

《JS原理、方法与实践》- canvas作图基础

###### canvas简介canvas标签是HTML5标准最受欢迎的一个标签，它的作用就相当于一块画布，可以通过JS脚本在canvas上面进行绘画，而且还可以对画面的内容进行修改，通过不断修改可以实现动画的效果，再跟事件结合后就可以制作游戏了！canvas标签及其所对应的JS对象HTMLCanvasElement本身非常简单，它们主要包含width、height两个属性和一个getConte....

文章 2022-05-13 来自：开发者社区

《JS原理、方法与实践》- canvas作图（八）- 阴影

属性值：* shadowOffsetX: 阴影的水平偏移距离* shadowOffsetY: 阴影的竖直偏移距离* shadowBlur: 阴影的模糊效果，数字越大越模糊* shadowColor: 阴影颜色示例：```html<!DOCTYPE html><html lang="en"><head>    <meta charset....

文章 2022-05-13 来自：开发者社区

《JS原理、方法与实践》- canvas作图（七）- 缩放

方法： scale(x, y)坐标系除了可以移动和旋转外还可以进行缩放，缩放使用的是scale方法，它有两个参数，分别标识横轴和纵轴缩放的比例, 1为原始大小，大于1为放大，小于1为缩小。示例：```html<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"&am...

文章 2022-05-13 来自：开发者社区

《JS原理、方法与实践》- canvas作图（六）- 坐标操作

#### 移动坐标原点方法：translate（x，y）：x，y代表移动后x，y坐标#### 旋转坐标系方法：rotate（angle），旋转角度，整数为逆时针，负数为顺时针。实例```html<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"> &amp...

文章 2022-05-13 来自：开发者社区

《JS原理、方法与实践》- canvas作图（五）- 环境的保存和恢复

在绘图的过程中经常需要对环境进行设置，例如填充样式、描边，在操作完之后，往往需要恢复到原来的环境，CanvasRenderingContext2D中可以使用save和restore方法快速操作。环境的保存和恢复还可以进行多层嵌套。多次使用save方法可以创建多个保存点，每次调用restore方法都会按save相反的顺序获取所保存的环境。实例：```html<!DOCTYPE html>...

文章 2022-05-13 来自：开发者社区

《JS原理、方法与实践》- canvas作图（四）- 插入文本和图片

#### 插入文本在绘图的过程中经常需要插入一些文本内容，在CanvasRenderingContext2D中可以使用下面的方法来插入：* fillText(text,x,y[,maxWidth]):实心文本* strokeText(text,x,y[,maxWidth]):空心wenb相关属性：* font: 字体* textAlign：排列方式,可选值[start, end, left, r....

文章 2022-05-13 来自：开发者社区

《JS原理、方法与实践》- canvas作图（三）- 修改颜色和样式

颜色和样式是通过strokeStyle和fillStyle两个属性修改的，它们的默认值都是black，strokeStyle表示画线（描边）用的样式，fillStyle表示填充用的样式，它们可以被赋予三种类型的值：纯色、渐变和模式。#### 纯色纯色有以下三种赋值方法：* 直接赋予颜色值，包括赋予十六进制和颜色的单词，例如#323232、red等* 使用rgb函数赋值，rgb函数有三个十进制（0....

共有244条

< 1 ... 13 14 15 16 ... 25 >

跳转至： GO

更新时间 2025-06-06 16:43:29

本页面内关键词为智能算法引擎基于机器学习所生成，如有任何问题，可在页面下方点击"联系我们"与我们沟通。

JavaScript更多原理相关

JavaScript您可能感兴趣

产品推荐

{"optioninfo":{"dynamic":"ture","static":"true"},"simplifiedDisplay":"newEdition","newCard":[{"iconImg":"https://img.alicdn.com/tfs/TB1JWN9qggP7K4jSZFqXXamhVXa-200-200.png","ifIcon":"img","link":"https://img.alicdn.com/tfs/TB1XY8hGYr1gK0jSZFDXXb9yVXa-1740-328.png","title":"Node.js 性能平台","des":"Node.js 性能平台（Node.js Performance Platform）是面向中大型 Node.js 应用提供 性能监控、安全提醒、故障排查、性能优化等服务的整体性解决方案。提供完善的工具链和服务，协助客户主动、快速发现和定位线上问题。","btn1":"申请开通","link1":"https://common-buy.aliyun.com/?spm=5176.179584.935956.btn1.6bd0276eYr3tGs&commodityCode=npp#/open","contentLink":"https://www.aliyun.com/product/nodejs","btn2":"产品文档","link2":"https://help.aliyun.com/product/60298.html?spm=5176.179584.935956.btn2.6bd0276eYr3tGs","infoGroup":[{"infoName":"入门指导","infoContent":{"firstContentName":"产品快速入门","firstContentLink":"https://help.aliyun.com/knowledge_detail/60338.html?spm=5176.179584.935963.2.6bd0276eYr3tGs","lastContentName":"常见问题","lastContentLink":"https://help.aliyun.com/knowledge_detail/60418.html?spm=5176.179584.935963.3.6bd0276eYr3tGs"}},{"infoName":"最佳实践","infoContent":{"firstContentName":"内存泄露案例","firstContentLink":"https://help.aliyun.com/document_detail/64011.html?spm=a2c4g.11174283.6.570.159030b1bBdKke"}},{"infoName":"产品动态","infoContent":{"firstContentName":"产品最新动态","firstContentLink":"https://www.aliyun.com/product/news?spm=5176.179584.1266814.211view.6bd0276eYr3tGs&category=233&product=261"}}],"btn3":""}],"card":[],"search":[],"infoCard":[],"title":{"mainTitle":"mPaaS","subtitle":"源自于支付宝小程序框架，亿级线上业务体量的锤炼，安全性媲美支付宝原生能力。不仅面向自有 App 投放小程序，更可快速构建打包，覆盖支付宝、淘宝、钉钉等应用。","linkUrl":"https://www.aliyun.com/product/mobilepaas/mpaas-miniprogram","btnText":"查看详情"},"visual":{"topbg":"https://img.alicdn.com/tfs/TB1bQuBIYH1gK0jSZFwXXc7aXXa-3840-740.gif","icon":"","textColor":"dark"},"dataList":[{"summary":"啦啦啦","author":"wuwu","linksUrl":"#"}],"sceneCard":[],"txt":[]}

{"$env":{"JSON":{}},"$page":{"env":"production"},"$context":{"optioninfo":{"dynamic":"ture","static":"true"},"simplifiedDisplay":"newEdition","newCard":[{"iconImg":"https://img.alicdn.com/tfs/TB1JWN9qggP7K4jSZFqXXamhVXa-200-200.png","ifIcon":"img","link":"https://img.alicdn.com/tfs/TB1XY8hGYr1gK0jSZFDXXb9yVXa-1740-328.png","title":"Node.js 性能平台","des":"Node.js 性能平台（Node.js Performance Platform）是面向中大型 Node.js 应用提供 性能监控、安全提醒、故障排查、性能优化等服务的整体性解决方案。提供完善的工具链和服务，协助客户主动、快速发现和定位线上问题。","btn1":"申请开通","link1":"https://common-buy.aliyun.com/?spm=5176.179584.935956.btn1.6bd0276eYr3tGs&commodityCode=npp#/open","contentLink":"https://www.aliyun.com/product/nodejs","btn2":"产品文档","link2":"https://help.aliyun.com/product/60298.html?spm=5176.179584.935956.btn2.6bd0276eYr3tGs","infoGroup":[{"infoName":"入门指导","infoContent":{"firstContentName":"产品快速入门","firstContentLink":"https://help.aliyun.com/knowledge_detail/60338.html?spm=5176.179584.935963.2.6bd0276eYr3tGs","lastContentName":"常见问题","lastContentLink":"https://help.aliyun.com/knowledge_detail/60418.html?spm=5176.179584.935963.3.6bd0276eYr3tGs"}},{"infoName":"最佳实践","infoContent":{"firstContentName":"内存泄露案例","firstContentLink":"https://help.aliyun.com/document_detail/64011.html?spm=a2c4g.11174283.6.570.159030b1bBdKke"}},{"infoName":"产品动态","infoContent":{"firstContentName":"产品最新动态","firstContentLink":"https://www.aliyun.com/product/news?spm=5176.179584.1266814.211view.6bd0276eYr3tGs&category=233&product=261"}}],"btn3":""}],"card":[],"search":[],"infoCard":[],"title":{"mainTitle":"mPaaS","subtitle":"源自于支付宝小程序框架，亿级线上业务体量的锤炼，安全性媲美支付宝原生能力。不仅面向自有 App 投放小程序，更可快速构建打包，覆盖支付宝、淘宝、钉钉等应用。","linkUrl":"https://www.aliyun.com/product/mobilepaas/mpaas-miniprogram","btnText":"查看详情"},"visual":{"topbg":"https://img.alicdn.com/tfs/TB1bQuBIYH1gK0jSZFwXXc7aXXa-3840-740.gif","icon":"","textColor":"dark"},"dataList":[{"summary":"啦啦啦","author":"wuwu","linksUrl":"#"}],"sceneCard":[],"txt":[]}}