【Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本】的更多相关文章

Javascript高级编程学习笔记（83）—— 富文本选区(3)

富文本选区 在富文本编辑器中使用 iframe 的 getSelection() 方法可以获取选中的文本 该方法是 window 对象和 document 对象的属性,调用后会返回一个当前选选择文本的 Selection 对象 selection 对象拥有下列属性: anchorNode: 选区起点所在节点 anchorOffset:选区起点在其所在节点中的偏移量 focusNode:选区终点所在节点 focusOffest:选区终点在其所在节点中的偏移量 isCollapsed:布尔值,表示选…

Javascript高级编程学习笔记（82）—— 富文本操作(2)

操作富文本 与富文本编辑器的交互的主要方式就是使用 document.execCommand() 方法 该方法可以对文档执行自定义命令,并且可以应用大多数格式 该方法接收三个参数: 要执行命令的名称 浏览器是否应该为当前页面提供用户界面 执行命令的值 为了保证跨浏览器的兼容性,最好保证第二个参数为 false,因为Firefox会在该参数为 true 时报错 命令 值(第三个参数) 说明 backcolor 颜色字符串 设置文档的背景颜色 bold null 将选中的文本转为粗体显示 copy…

Javascript高级编程学习笔记（81）—— 富文本(1)

富文本编辑 富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得) 常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了对应功能的实现 该技术的本质就是在 HTML 页面中嵌入<iframe> 通过设置页面的 designMode 属性,使该页面可以被编辑 将该属性设置为 on 后文档就会变得可编辑 "off" 是默认值 以下方的 HTML 代码为例 <!DOCTYPE html>…

Javascript高级编程学习笔记（88）—— Canvas(5)绘制文本

绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘制文本的X坐标 绘制文本的Y坐标 最大像素宽度 这些方法都以以下属性为基础: font: 表示文本样式,大小,字体, 该属性以 CSS 中指定字体的格式来指定 textAlign: 表示文本对齐方式,可能的值有 "start" "end" "left"…

Javascript高级编程学习笔记（87）—— Canvas(4)绘制路径

绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x,y,半径,起始角度,结束角度,旋转方向):     用于绘制圆形路径,以(x,y)为圆心,旋转方向为一个bool值表示是否以逆时针方向绘制,起始角度以及结束角度的单位都是弧度 arcTo(x1,y1,x2,y2,半径):                   从(x1,x2)为起点绘制一条到(x2,y…

Javascript高级编程学习笔记（86）—— Canvas(3)绘制矩形

绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐标 绘制矩形的 Y 坐标 矩形的宽度 矩形的高度 这些参数的单位都是像素 首先,fillRect() 方法在 canvas 中绘制的矩形会填充指定颜色 填充的颜色通过上一篇文章介绍的 fillStyle 指定,如: var drawing = document.getElementById('dra…

Javascript高级编程学习笔记（94）—— Canvas(11) 合成

合成 除了之前介绍的属性之外,还有两个属性会应用到整个2d上下文中; globalAlpha 用于指定所有绘制的透明度 globalComposition 用于表示后绘制的图形怎样与先绘制的图形进行结合 该属性的值是字符串,可能的值如下 source-over(默认)   后绘制的图形位于先绘制的图形的上方 source-in    后绘制的图形与先绘制的图形重叠部分可见,其它部分透明 source-out    后绘制的图形与先绘制的图形不重叠部分可见,先绘制的图形完全透明 source-at…

Javascript高级编程学习笔记（93）—— Canvas(10) 模式及图像数据

模式 模式其实就是重复的图像,用来填充或描边图形 要创建一个新模式,可以调用 createPattern()并传入两个参数 一个HTML img元素 用于表示如何重复的字符串 "repeat" 重复 "repeat-x" 水平方向重复 "repeat-y" 垂直方向重复 "no-repeat" 不重复 如: let image = document.images[0]; let pattern = document.creat…

Javascript高级编程学习笔记（90）—— Canvas(7) 绘制图像

绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布的(x,y)点  context.drawImage(img, x, y) 以宽 width 高 height 将<img>绘制到(x, y)点   context.drawImage(img, x, y, width, height) 绘制目标图像的一部分到画布 context.drawImag…

Javascript高级编程学习笔记（89）—— Canvas(6) 变换

变换 通过上下文的变化,可以对图像进行处理后再将其绘制到画布上 当我们创建上下文时,会以默认值初始化变化矩阵,在默认的变换矩阵下所有处理都按描述直接绘制. 而当我们为上下文应用变换时,会导致使用不同的变换矩阵进行处理,从而产生不同的结果 canvas 上下文为我们提供了以下方法来修改变换矩阵: ratate(angle):  围绕原点将绘制的图像旋转 angle 弧度 scale(scaleX, scaleY): 缩放图像,在x方向乘以 scaleX , y方向乘以 scaleY, 默认值为1.…