Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canvas>元素最早是由苹果公司推出,主要是在 Dashboard 插件中使用,后来该元素被HTML5引入,然后得到主流浏览器的广泛支持 canvas除了具备绘制 2D 上下文的能力之外,还通过 WEBGL 提供了绘制3D上下文的能力 虽然浏览器对该功能的支持日益完善,但是需要注意的是一些老版本的操作系统由于缺…

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

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

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

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

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

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

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

2D上下文 使用2D上下文提供的方法可以绘制简单的2D图形,如矩形,弧线和路径; 2D上下文的坐标开始域<canvas>元素的左上角,原点坐标为(0,0) 后续所有操作的计算都基于原点,x越大表示越靠右,y越大表示越靠下 此外<canvas>的width,height属性表示水平和垂直方向上可用像素点的数目 填充和描边 2D上下文的两种基本绘图操作是填充和描边. 填充就是用指定等样式(颜色,渐变,图像)填充目标图形 描边就是指在图形的边缘划线. 大多数的2D上下文的操作都会细分为填…

阴影 2D上下文将会根据以下属性为形状或路径绘制阴影 shadowColor: 用于设置阴影颜色,默认为黑色 shadowOffsetX: 形状或路径X方向的阴影偏移量,默认为0 shadowOffsetY: 形状或路径y轴方向的阴影偏移量,默认为0 shadowBlur: 模糊的像素数,默认为0, 即不模糊 这些属性都可以通过 context 对象来修改,只要在绘制之前为其设置值,就能自动产生阴影 var context = drawing.getContext("2d"); //…