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

###### canvas简介canvas标签是HTML5标准最受欢迎的一个标签,它的作用就相当于一块画布,可以通过JS脚本在canvas上面进行绘画,而且还可以对画面的内容进行修改,通过不断修改可以实现动画的效果,再跟事件结合后就可以制作游戏了!canvas标签及其所对应的JS对象HTMLCanv...

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

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

JavaScript入门与实战

52 课时 |
19699 人已学 |
免费

JavaScript 自学手册文档教程

65 课时 |
3411 人已学 |
免费
开发者课程背景图

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

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

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

#### 移动坐标原点方法:translate(x,y):x,y代表移动后x,y坐标#### 旋转坐标系方法:rotate(angle), 旋转角度,整数为逆时针,负数为顺时针。实例```ht...

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

在绘图的过程中经常需要对环境进行设置,例如填充样式、描边,在操作完之后,往往需要恢复到原来的环境,CanvasRenderingContext2D中可以使用save和restore方法快速操作。环境的保存和恢复还可以进行多层嵌套。多次使用save方法可以创建多个保存点,每次调用restore方法都会...

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

#### 插入文本在绘图的过程中经常需要插入一些文本内容,在CanvasRenderingContext2D中可以使用下面的方法来插入:* fillText(text,x,y[,maxWidth]):实心文本* strokeText(text,x,y[,maxWidth]):空心wenb相关属性:*...

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

颜色和样式是通过strokeStyle和fillStyle两个属性修改的,它们的默认值都是black,strokeStyle表示画线(描边)用的样式,fillStyle表示填充用的样式,它们可以被赋予三种类型的值:纯色、渐变和模式。#### 纯色纯色有以下三种赋值方法:* 直接赋予颜色...

《JS原理、方法与实践》- canvas作图(二)- 组合、剪切、坐标检测

#### 组合与剪切组合与剪切主要是对应多个图形来说的,组合指的是多个图形重叠时的组合方式,剪切是指使用路径来指定绘图的区域,类似于Photoshop中的蒙版的效果。###### 组合图形的组合是通过globalCompositeOperation属性来操作的,该属性可以取下面的值:* source...

《JS原理、方法与实践》- canvas作图(一)

###### canvas简介canvas标签是HTML5标准最受欢迎的一个标签,它的作用就相当于一块画布,可以通过JS脚本在canvas上面进行绘画,而且还可以对画面的内容进行修改,通过不断修改可以实现动画的效果,再跟事件结合后就可以制作游戏了!canvas标签及其所对应的JS对象HTMLCanv...

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

社区圈子

开发与运维
开发与运维
集结各类场景实战经验,助你开发运维畅行无忧
6438+人已加入
加入
相关电子书
更多
现代Javascript高级教程
JS零基础入门教程(上册)
Javascript异步编程
立即下载 立即下载 立即下载