您的位置:

js怎么封装canvas成插件,canvas插件有什么用

js怎么封装canvas成插件,canvas插件有什么用

更新:

本文目录一览:

怎样用原生JS封装自己需要的插件

函数封装,添加合适的参数

如function  aa(cla){

$('.'+cla).html('你好');

}

调用的时候aa("zz");zz是class类名

如何用js新建一个canvas?

用js新建canvas的方法如下:

var canvas = document.createElement('canvas');

canvas.id = "CursorLayer";

canvas.width = 1224;

canvas.height = 768;

canvas.style.zIndex = 8;

canvas.style.position = "absolute";

canvas.style.border = "1px solid";

document.body.appendChild(canvas);

注意:此处一定要追加到body里面。

Canvas 使用指南

canvas 的能力是通过 context 对象表现出来的,context一般称为绘图环境。

DOMString 为 "2d" 时,context 是 CanvasRenderingContext2D 对象;(本文重点)

DOMString 为 "webgl" 时,context 是 WebGLRenderingContext 对象;

DOMString 为 "webgl2" 时,context 是 WebGL2RenderingContext 对象;

DOMString 为 "bitmaprenderer" 时,context 是 ImageBitmap 对象;

CanvasRenderingContext2D 对象实例 instance 共有16个属性,只要设置了这些属性,就会影响 instance 调用绘制方法时的表现,常用的有:

注意:可使用 instance 的 save() 和 restore() 方法来临时修改 instance 的属性

1、一般用来保存数据,不展示在浏览器页面上,创建的两种方式:a、css 方式设置为 display:none;b、JS创建 document.createElement('canvas');

2、与HTML结合使用:可以采用 CSS 定位的方式,将 HTML 元素置于 canvas 元素之上,比如:在 canva 上叠加一个 div panel 作为某个开关控制界面;选景橡皮筋;时钟等

3、也可使用两个 canvas,一个用来显示,另一个用来做数据准备和处理,这种方式通常效率高,但比较耗费内存

1、准备一个绘制背景的函数,用于每次擦除上一次绘制的结果

2、绘制辅助线

3、监听事件,做坐标转换 windowToCanvas

4、绘制内容的保存于恢复

5、三事件

onmousedown:保存初始 canvas 绘制状态

onmousemove: 更新位置信息,并不断调用初始 canvas 绘制状态来擦除上一个绘制

onmouseup: 调用初始 canvas 绘制状态来擦除上一个绘制,并根据onmousemove保存的信息做最终绘制,将结果绘制在 canvas 上

fillStyle 和 strokeStyle 可以是任意有效的css颜色值或者渐变色以及图像Pattern

canvas 某一时刻只能有一条路径存在,这条路径可以包含多条子路径。用 beginPath 来开始一条新路径或清除上一次子路径

textAlign: left,center,right

textBaseline: top,middle,bottom

1、三属性 font,textAlign,textBaseline

2、三方法 strokeText, fillText, measureText

strokeText(text,x,y,maxWidth) 指定文本超过maxWidth会被缩放

measureText(text).width 返回指定文本宽度

3、水平垂直居中

注意每次变换前,用 save 和 restore 来保存原来绘制上下文

1、由路径定义的一片区域,如一个三角形,矩形,圆形,然后调用 clip 即可得到剪辑区域

2、默认和 canvas 大小一致

3、设置剪辑区域后,浏览器将只对该区域进行绘制

4、调用clip会把剪辑区域设为当前剪辑区域与当前路径定义的区域的交集,故clip 的调用经常在 save 和 restore 之间,这是为了防止剪辑区域越来越小

主要是 drawImage,getImageData,putImageData,createImageData 四个 API

python保存网页上的canvas到本地

python保存网页上的canvas到本地,利用canvas2image.js脚本,前端用js封装,调用canvas2image.js脚本(github可以下到的)中的方法,缺点是只能保存到电脑c盘中的downloads文件夹中,如果要布置到服务器上,依然是下在自己的电脑上。如果不布置到服务器上,这个方法就很简单了。

JS之使用Canvas绘图

canvas 元素负责在页面中设定一个区域,然后就可以通过 JavaScript 动态地在这个区域中绘制图形。

要使用 canvas 元素,必须先设置其 width 和 height 属性,指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息,如果浏览器不支持 canvas 元素,就会显示这些信息。

如果不添加任何样式或者不绘制任何图形,在页面中是看不到该元素的。

要在这块画布(canvas)上绘图,需要取得绘图上下文。而取得绘图上下文对象的引用,需要调用getContext() 方法并传入上下文的名字。传入 "2d" ,就可以取得 2D 上下文对象。

使用 toDataURL() 方法,可以导出在 canvas 元素上绘制的图像。这个方法接受一个参数,即图像的 MIME 类型格式,而且适合用于创建图像的任何上下文。

取得画布中的一幅 PNG 格式的图像:

如果绘制到画布上的图像源自不同的域, toDataURL() 方法会抛出错误。

使用 2D 绘图上下文提供的方法,可以绘制简单的 2D 图形,比如矩形、弧线和路径。2D 上下文的坐标开始于 canvas 元素的左上角,原点坐标是(0,0)。

2D 上下文的两种基本绘图操作是填充和描边。填充,就是用指定的样式(颜色、渐变或图像)填充图形;描边,就是只在图形的边缘画线。大多数 2D 上下文操作都会细分为填充和描边两个操作,而操作的结果取决于两个属性: fillStyle 和 strokeStyle 。

这两个属性的值可以是字符串、渐变对象或模式对象,而且它们的默认值都是 "#000000" 。如果为它们指定表示颜色的字符串值,可以使用 CSS 中指定颜色值的任何格式,包括颜色名、十六进制码、rgb 、 rgba 、 hsl 或 hsla 。

与矩形有关的方法包括 fillRect() 、strokeRect() 和 clearRect() 。这三个方法都能接收 4 个参数:矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过 fillStyle 属性指定:

strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过 strokeStyle 属性指定。

描边线条的宽度由 lineWidth 属性控制,该属性的值可以是任意整数。另外,通过 lineCap 属性可以控制线条末端的形状是平头、圆头还是方头( "butt" 、"round" 或 "square" ),通过 lineJoin 属性可以控制线条相交的方式是圆交、斜交还是斜接( "round" 、 "bevel" 或 "miter" )。

clearRect() 方法用于清除画布上的矩形区域。本质上,这个方法可以把绘制上下文中的某一矩形区域变透明。

通过路径可以创造出复杂的形状和线条。要绘制路径,首先必须调用 beginPath() 方法,表示要开始绘制新路径。然后,再通过调用下列方法来实际地绘制路径。

如果想绘制一条连接到路径起点的线条,可以调用closePath() 。如果路径已经完成,你想用 fillStyle 填充它,可以调用 fill() 方法。另外,还可以调用 stroke() 方法对路径描边,描边使用的是 strokeStyle 。最后还可以调用 clip() ,这个方法可以在路径上创建一个剪切区域。

绘制一个不带数字的时钟表盘:

isPointInPath() 方法接收 x 和 y 坐标作为参数,用于在路径被关闭之前确定画布上的某一点是否位于路径上。

绘制文本主要有两个方法: fillText() 和 strokeText() 。这两个方法都可以接收 4 个参数:要绘制的文本字符串、x 坐标、y 坐标和可选的最大像素宽度。

两个方法都以下列 3 个属性为基础:

fillText() 方法使用fillStyle 属性绘制文本, strokeText() 方法使用 strokeStyle 属性为文本描边。

通过上下文的变换,可以把处理后的图像绘制到画布上。2D 绘制上下文支持各种基本的绘制变换。创建绘制上下文时,会以默认值初始化变换矩阵,在默认的变换矩阵下,所有处理都按描述直接绘制。为绘制上下文应用变换,会导致使用不同的变换矩阵应用处理,从而产生不同的结果。

把原点变换到表盘的中心:

使用 rotate() 方法旋转时钟的表针:

可以调用 save() 方法,调用这个方法后,当时的所有设置都会进入一个栈结构,得以妥善保管。调用 restore() 方法,在保存设置的栈结构中向前返回一级,恢复之前的状态。

save() 方法保存的只是对绘图上下文的设置和变换,不会保存绘图上下文的内容。

可以使用 drawImage()方法把一幅图像绘制到画布上。

以使用三种不同的参数组合。最简单的调用方式是传入一个 HTML img 元素,以及绘制该图像的起点的 x 和 y 坐标。

如果想改变绘制后图像的大小,可以再多传入两个参数,分别表示目标

宽度和目标高度。通过这种方式来缩放图像并不影响上下文的变换矩阵。

绘制出来的图像大小会变成 20×30 像素。

可以选择把图像中的某个区域绘制到上下文中。 drawImage() 方法的这种调用方式总共需要传入 9 个参数:要绘制的图像、源图像的 x 坐标、源图像的 y 坐标、源图像的宽度、源图像的高度、目标图像的 x 坐标、目标图像的 y 坐标、目标图像的宽度、目标图像的高度。这样调用drawImage() 方法可以获得最多的控制。

2D 上下文会根据以下几个属性的值,自动为形状或路径绘制出阴影。

要创建一个新的线性渐变,可以调用 createLinearGradient() 方法。这个方法接收 4 个参数:起点的 x 坐标、起点的 y 坐标、终点的 x 坐标、终点的 y 坐标。调用这个方法后,它就会创建一个指定大小的渐变,并返回

CanvasGradient 对象的实例。

创建了渐变对象后,下一步就是使用 addColorStop() 方法来指定色标。这个方法接收两个参数:色标位置和 CSS 颜色值。色标位置是一个 0(开始的颜色)到 1(结束的颜色)之间的数字。

为了让渐变覆盖整个矩形,而不是仅应用到矩形的一部分,矩形和渐变对

象的坐标必须匹配才行。

要创建径向渐变(或放射渐变),可以使用 createRadialGradient() 方法。这个方法接收 6 个参数,对应着两个圆的圆心和半径。前三个参数指定的是起点圆的原心(x 和 y)及半径,后三个参数指定的是终点圆的原心(x 和 y)及半径。

模式其实就是重复的图像,可以用来填充或描边图形。要创建一个新模式,可以调用createPattern() 方法并传入两个参数:一个 HTML img 元素和一个表示如何重复图像的字符串。其中,第二个参数的值与 CSS 的 background-repeat 属性值相同,包括 "repeat" 、 "repeat-x" 、"repeat-y" 和 "no-repeat" 。

createPattern() 方法的第一个参数也可以是一个 video 元素,或者另一个 canvas 元素。

2D 上下文的一个明显的长处就是,可以通过 getImageData() 取得原始图像数据。这个方法接收4 个参数:要取得其数据的画面区域的 x 和 y 坐标以及该区域的像素宽度和高度。

取得左上角坐标为(10,5)、大小为 50×50 像素的区域的图像数据:

返回的对象是 ImageData 的实例。每个 ImageData 对象都有三个属性: width 、 height 和data 。其中 data 属性是一个数组,保存着图像中每一个像素的数据。

在 data 数组中,每一个像素用4 个元素来保存,分别表示红、绿、蓝和透明度值。

数组中每个元素的值都介于 0 到 255 之间(包括 0 和 255)。

还有两个会应用到 2D 上下文中所有绘制操作的属性: globalAlpha 和 globalCompositionOperation 。其中, globalAlpha 是一个介于 0 和 1 之间的值(包括 0和 1),用于指定所有绘制的透明度。默认值为 0。如果所有后续操作都要基于相同的透明度,就可以先把 globalAlpha 设置为适当

值,然后绘制,最后再把它设置回默认值 0。

第二个属性 globalCompositionOperation 表示后绘制的图形怎样与先绘制的图形结合。

WebGL 是针对 Canvas 的 3D 上下文。

WebGL是从 OpenGL ES 2.0 移植到浏览器中的,而 OpenGL ES 2.0 是游戏开发人员在创建计算机图形图像时经常使用的一种语言。WebGL 支持比 2D 上下文更丰富和更强大的图形图像处理能力。

WebGL 涉及的复杂计算需要提前知道数值的精度,而标准的 JavaScript 数值无法满足需要。为此,WebGL 引入了一个概念,叫类型化数组(typed arrays)。类型化数组也是数组,只不过其元素被设置为特定类型的值。

类型化数组的核心就是一个名为 ArrayBuffer 的类型。每个 ArrayBuffer 对象表示的只是内存中指定的字节数,但不会指定这些字节用于保存什么类型的数据。通过 ArrayBuffer 所能做的,就是为了将来使用而分配一定数量的字节。

创建了 ArrayBuffer 对象后,能够通过该对象获得的信息只有它包含的字节数,方法是访问其byteLength 属性:

使用 ArrayBuffer (数组缓冲器类型)的一种特别的方式就是用它来创建数组缓冲器视图。其中,最常见的视图是 DataView ,通过它可以选择 ArrayBuffer 中一小段字节。为此,可以在创建 DataView实例的时候传入一个 ArrayBuffer 、一个可选的字节偏移量(从该字节开始选择)和一个可选的要选择的字节数。

实例化之后, DataView 对象会把字节偏移量以及字节长度信息分别保存在 byteOffset 和byteLength 属性中。

类型化视图一般也被称为类型化数组,因为它们除了元素必须是某种特定的数据类型外,与常规的数组无异。

类型化数组是 WebGL 项目中执行各种操作的重要基础。

目前,主流浏览器的较新版本大都已经支持 canvas 标签。同样地,这些版本的浏览器基本上也都支持 2D 上下文。但对于 WebGL 而言,目前还只有 Firefox 4+和 Chrome 支持它。

新手请教,如何将一段JS代码封装成一个方法

鉴于楼主欠缺编程经验,我就先不说封装成jQuery插件等高大上的做法了。单就论封装成方法而言。

方法,也就是函数。是面向过程式语言一种代码复用的初级手段,简而言之,就是把重复的部分用函数封装起来。

例如猫叫多遍,cat.meow(), 你总不可能写对应次数的代码,一般会写成:

function meow(num){

    for(var i=0;inum;i++){

        cat.meow()

    }

}

meow(1000)

这就是一种最基础的代码复用。

当然,面向对象的语言也许有更简单的 cat.meow(1000)

那么,针对楼主的情况。逐步讲一下各层次的方法。最简单的用函数封装一下就是:

function effect(srcDom,destDom,className){

    $(srcDom).mouseenter(function(){

        $(destDom).addClass(className)

    }).mouseout(function(){

        $(destDom).removeClass(className)

    })

}

然后调用

effect('#plate-1','#plate-1hover','plate-1after')

effect('#plate-2','#plate-2hover','plate-2after')

effect('#plate-3','#plate-3hover','plate-3after')

鉴于楼主的DOM的ID和Class命名比较有规律,可以写成这样

function effect(name){

    $('#'+name).mouseenter(function(){

        $('#'+name+'hover').addClass(name+'after')

    }).mouseout(function(){

        $('#'+name+'hover').removeClass(name+'after')

    })

}

然后调用

effect('plate-1')

effect('plate-2')

effect('plate-3')

但是这样还是不够通用,楼主应该看看事件方面有关事件委托的知识

js怎么封装canvas成插件,canvas插件有什么用

本文目录一览: 1、怎样用原生JS封装自己需要的插件 2、如何用js新建一个canvas? 3、Canvas 使用指南 4、python保存网页上的canvas到本地 5、JS之使用Canvas绘图

2023-12-08
canvasjs二维码,canvas生成二维码

本文目录一览: 1、html5怎么扫描二维码 2、qrcode.js怎么使二维码居中 3、jquery怎么实现url地址生成二维码实例 4、网页中如何用js实现微信中的长按识别二维码的功能吗 5、用j

2023-12-08
canvas图片在路线上滚动,canvas滑动事件

2022-11-25
js中canvas是什么,Canvas是什么

2022-11-23
Vue生成二维码插件

2023-05-18
js的canvas应用,canvas web

本文目录一览: 1、JS之使用Canvas绘图 2、《JS原理、方法与实践》- canvas作图(六)- 坐标操作 3、Canvas 使用指南 4、JS中canvas画布绘制中如何实现缩放,位移,旋转

2023-12-08
js数据库关系图插件,前端关系图插件

本文目录一览: 1、大数据显示适合用js图表插件吗 2、如何用js实现动态画数据关系图 3、用什么语言 可以制作人物关系图 比如js 或者jquery 人物的名称 和关系 是从数据库中读出的 4、求教

2023-12-08
canvasjs图片(canvas绘制一张图片)

本文目录一览: 1、用HTML5中canvas加js代码把下面这张图片绘制出釆 2、为什么我用js创建的image在canvas里显示不出来? 3、HTML5、JS的canvas绘制图片的问题。。 4

2023-12-08
echartchina.js的简单介绍

本文目录一览: 1、echart移动端优化 2、echarts3地图显示不正常是怎么回事 3、ECharts3 怎么加载 china.js 地图 4、echar_china_cities_pypkg中

2023-12-08
js和canvas实现数字滚动,canvas 滚动条

本文目录一览: 1、Unity3d如何实现滚动文本框 2、如何实现canvas的图片轮播 3、怎样canvas画布上添加滚动条,显示更多数据 4、HTML5 在CANVAS标签里面增加滚动条 Unit

2023-12-08
为什么idea插件中找不到cue,js,idea下载不了插件

2023-01-09
javascript如何封装自己的js插件(js 工具类封装

本文目录一览: 1、如何用javascript写个插件 2、怎样用原生JS封装自己需要的插件 3、封装一个自己的js库 4、JS方法写好了 用JS写的脚本 然后我想封装JS如何封装? 如何用javas

2023-12-08
前端关系图谱插件,前端关系图谱插件怎么用

2022-11-25
包含pixijs导出canvas的词条

本文目录一览: 1、canvas怎么设置鼠标事件 2、pixi.js支持canvas吗 3、PIXI的canvas的颜色为什么始终都是黑色的 4、egret运行界面左上角为什么有60fps webgl

2023-12-08
视频播放器插件php,视频播放器插件是什么

2023-01-06
Vue关系图插件详解

2023-05-19
canvas内部滚动条,canvas内容滚动

2022-11-29
drawio文件用什么软件打开?

2023-05-21
js关系图插件,前端关系图插件

2023-01-05
Canvas绘制箭头

2023-05-19