canvas学习之API整理笔记(1),——在vue中我们能够给input控件贰个ref属性

<input
type=”file”>——在vue中我们能够给input控件3个ref属性,然后我们得以选用this.$refs.(前面那东西的属性值,其实就是一个锚点)去获得那个控件,然后去调用那个控件的files属性,大家就能够获得控件里面获得到的数额了。当然,他是叁个目的,这一个数量也是储存在对象的一性子质其中,具体什么的本人去打字与印刷看看。然后这一个指标有个name属性,顾名思义,正是你收获的公文名,还有壹天品质是length,大家能够运用那几个天性去决断控件到底里面有未有数量。倘使您自个儿去做过,你会发现成下边一种情景。

前面小编收十过1篇小说canvas学习之API整理笔记(1),从那篇小说大家早就足以主导了然到常用绘图的API、简单的退换和卡通。而本篇文章的要紧内容囊括高等动画、像素操作、质量优化等知识点,疏解各样知识点的还要还会有一对光彩夺目的demo,保险看官们全程在线,毫无尿点,看完不会后悔,哈哈,二个纯正的笑^_^。
除却,关于canvas的1多元实例即以往袭!欢迎关注!

——场景场景场景——–

起来之前

var can = document.getElementById(‘canvas’);
//创建一个画布
var ctx = can.getContext(‘2d’);

下边全体的操作都在画布ctx上进展操作。

1.第一回用控件获取一张图纸,大家来看控件获取到了数据

高端动画

继上壹篇简介了动画(主借使requestAnimationFrame方法),现在我们来一步步完毕一个在画布内滚动的实例。

html代码:

<canvas id="canvas" width="400" height="200" style="background:#fff;"></canvas>

js代码:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ball = {    //小球属性,原点位置,速度,半径等。
    x: 100,  
    y: 100,
    vx: 4,
    vy: 2,
    radius: 20,
    color: 'blue',
    draw: function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
    }
};
function draw() {
    ctx.clearRect(0,0, canvas.width, canvas.height);    //绘制之前清除整个画布
    ball.draw();   //在画布中绘制小球
    ball.x += ball.vx;   //改变小球位置坐标
    ball.y += ball.vy;   //改变小球位置坐标
    if (ball.y + ball.vy > canvas.height-15 || ball.y + ball.vy < 15) {   //边界判断
        ball.vy = -ball.vy;
    }
    if (ball.x + ball.vx > canvas.width-15 || ball.x + ball.vx < 15) {   //边界判断
        ball.vx = -ball.vx;
    }
    window.requestAnimationFrame(draw);   //循环执行
}
draw();

地方代码完成的功用如下图:

图片 1

代码笔者壹度写了基本的注脚,简单驾驭,简单概括一下这个实例的实现思想

创制三个小球对象,包罗贰个绘制本人的措施。在整个画布中绘制那一个小球,然后在下一回绘制在此以前,先化解整个画布,改动小球的各类属性(包罗了逻辑,比如边界的判断),然后重新绘制一回,从而达到了动起来的效率。

1经你把上面代码中的ctx.clearRect(0,0, canvas.width, canvas.height);换到了上边那样:

ctx.fillStyle = 'rgba(255,255,255,0.3)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

就可以取得渐变尾巴的效果:

图片 2

二.次之次点开同样的控件,可是…..

像素操作

假若大家想对贰个canvas画布进行如下操作:获取每一个点的音信,对每1个坐标点实行操作。那大家就供给明白一下ImageData对象了。

ImageData对象(由getImageData方法获得的)中存款和储蓄着canvas对象实际的像素数量,它包罗以下多少个只读属性:

  • width

    图形宽度,单位是像素。

  • height

    图表中度,单位是像素。

  • data

    Uint八ClampedArray类型的壹维数组,包括着奥迪Q伍GBA格式的整型数据,范围在0至255时期(包涵25伍)。轻巧讲,正是二个数组,每四个元素存储一个点的颜色信息,这四个元素分别对应为R、G、B、A的值(知道颜色取值的1眼就清楚了,不知情的也没涉及,前边有实例,一看就精晓)。

三.自作者啥也不选

创建ImageData对象

去创立一个新的,空白的ImageData对像,你应当会动用createImageData()方法

var myImageData = ctx.createImageData(width, height);

位置代码创设了三个新的有血有肉特定尺寸的ImageData对像。全数像素被预设为透明黑。

四.控件里面原来的数目被清空了,貌似向来没来过这些全球

赢得像素数据

为了拿走贰个富含画布场景像素数据的ImageData对像,你能够用getImageData()方法

var myImageData = ctx.getImageData(left, top, width, height);

创建的myImageData对象就有width、height、data八个属性的值了。看上面那一个实例:

html代码:

<div id="color">hover处的颜色</div>

<canvas id="myCanvas" width="300" height="150"></canvas>

js代码:

var can = document.getElementById('myCanvas');
var ctx = can.getContext('2d');
var img = new Image();
    img.src = "img_the_scream.jpg";
ctx.drawImage(img, 0, 0);
var color = document.getElementById('color');
function pick(event) {
    var x = event.layerX;
    var y = event.layerY;
    var area = ctx.getImageData(x, y, 1, 1);  //创建ImageData对象
    var data = area.data;   //获取data属性(一个存储颜色rgba值的数组)
    var rgba = 'rgba(' + data[0] + ',' + data[1] + ',' + data[2] + ',' + data[3] + ')';
    color.style.color =  rgba;
    color.textContent = rgba;
}
can.addEventListener('mousemove', pick);

贯彻的功效如下图:

图片 3

注意:
假定有点同学试到那里发现存这些报错内容Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.,须求检讨那行代码:

img.src = "img_the_scream.jpg";

此处的图片地址不能是跨域地址。网上有局地消除办法,这里就不开始展览讲了。

那明明不太协调,于是动动脑子,你能够这么做

写入像素数据

你能够用putImageData()方法去对现象实行像素数据的写入。

ctx.putImageData(myImageData, x, y);  //在画布的(x, y)点开始绘制myImageData所存储的像素信息。

之所以大家得以把收获到的像素新闻实行拍卖,然后再重复绘制,就获得了新的图纸。看看上边那几个实例:

html代码:

<canvas id="canvas" width="660" height="277"></canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'img_the_scream.jpg';
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);  //获取ImageData
var colors = imageData.data;  //获取像素信息
function invert() {
    for (var i = 0; i < colors.length; i += 4) {  //四个为一组
        colors[i]     = 225 - colors[i];     // red
        colors[i+1] = 225 - colors[i+1]; // green
        colors[i+2] = 225 - colors[i+2]; // blue
        colors[i+3] = 255;   //alpha
    }
    ctx.putImageData(imageData, 220, 0);  //从(220, 0)开始绘制改变过的颜色
}
function toGray() {
    for (var i = 0; i < colors.length; i += 4) {
        var avg = (colors[i] + colors[i+1] + colors[i+2]) / 3;  
        colors[i] = avg; // red
        colors[i+1] = avg; // green
        colors[i+2] = avg; // blue
        colors[i+3] = 255;   //alpha
    }
    ctx.putImageData(imageData, 440, 0); //从(440, 0)开始绘制改变过的颜色
} 
invert();   //反转色
toGray();   //变灰色

落到实处的功效如下图:

图片 4

    data () {
       return {
          fileName: null
      }
   }

天性优化


坐标点尽量用整数

浏览器为了达到抗锯齿的效率会做额外的演算。为了制止那种情状,请确认保证使用canvas的绘图函数时,尽量用Math.floor()函数对具有的坐标点取整。比如:

ctx.drawImage(myImage, 0.3, 0.5);  //不提倡这样写,应该像下面这样处理
ctx.drawImage(myImage, Math.floor(0.3), Math.floor(0.5));
if (this.$refs.imgFile.files.length !== 0) {
   this.fileImg = this.$refs.imgFile.files
} else {
   this.$refs.imgFile.files = this.fileImg
   return
 }

动用多少个画布绘制复杂气象

譬如说做2个戏耍,有几个范畴:背景层(简单变化)、游戏层(时刻变化)。这年,我们就足以创建三个画布,三个专程用来绘制不改变的背景(少量绘制),另二个用来绘制游戏动态部分(多量制图),如同那样:

<canvas id="background-can" width="480" height="320"></canvas>
<canvas id="game-can" width="480" height="320"></canvas>

地点是vue的写法,因为近来用vue写项目,所以偷个懒。用原生的话做的措施同样

用CSS设置静态大图

万1有一层是永世不变的,比如一王丽萍态的背景图,最佳使用div+css的方法去替代ctx.drawimage(),这么做能够幸免在每一帧在画布上绘制大图。轻易讲,dom渲染断定比canvas的操作品质越来越高。

好了,今后你会意识,不会再有地点那种非友好的用户体验了,当然那么些比量齐观,有人说那是个fetch,笔者感觉它大多时候是个bug…..

尽量少操作canvas的缩放

壹经要对2个画布举办缩放,若是得以的话,尽量利用CSS3的transform来兑现。综上说述,记住二个尺度,能用html+div完毕的玩命不要js对canvas举办操作。

笔者们随后唠

更多

  • 将画布的函数调用集合到一块(例如,画一条折线,而不要画多条分开的直线)
  • 应用分化的格局去排除画布(clearRect()、fillRect()、调控canvas大小)
  • 尽心尽力幸免 shadowBlur天性
  • 有动画,请使用window.requestAnimationFrame()
    而非window.setInterval()

接下去,我们会生成贰个图纸对象,你能够用createElement的章程只怕用new
Image的措施,那几个不纠结

结语

OK,canvas常用的API就着力总计完了,靠那一个API已经足足开荒1些中等游戏了。比如事先自个儿写的实例demo之小游戏tinyHeart,就是用那几个函数画出来的。关键是这个函数的组成使用,多多联系就好了。

假使您把自家从前的两篇文章都看了的话,相信你会对canvas越来越感兴趣。所认为了做1个持久的人,作者继续还会出一文山会海的关于canvas的实例,注意,是1多种!敬请期待!

请看那里

let imgRender = new FileReader()//用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据
imgRender.readAsDataURL(file)//将文件读取为DataURL

 具体文献链接:http://blog.csdn.net/zk437092645/article/details/8745647

比方你问怎么是dataurl,我建议您自个儿先去找小说看看吧,小编这有1篇不错的文章链接你可以看看:http://www.webhek.com/post/data-url.html

下一场,大家运用canvas,先安装大小,于是能够如此做

let canvas = document.createElement('canvas')
canvas.width = targetWidth
canvas.height = targetHeight

作者回想canvas对象默许的幅度是300,高度是150,你协调能够打字与印刷看看

然后大家做下边1件事

let canvasCtx = canvas.getContext('2d')

为了节约有些同学去翻资料,我表明下啥意思===>钦命了您想要在画布上制图的类型。当前唯壹的合法值是
“2d”,它钦点了贰维绘图,并且导致这几个办法重临二个环境指标,该目的导出三个2维绘图
API(那是网上的演讲,作者只是个搬运工)。

下一场大家用那么些目的的fillRect方法,能够设定这一个环境指标的横坐标、纵坐标、宽度、高度。然后是最后一步,用drawImage方法向画布上制图图像、画布或摄像。就像是上面

canvasCtx.fillStyle = '#fff'
canvasCtx.fillRect(0, 0, canvas.width, canvas.height)// set the default background color of png  to white
canvasCtx.drawImage(图片对象files[0], 0, 0, targetWidth, targetHeight)

OK,那面包车型地铁步骤相当的粗略有木有。总的来讲,我们还是用canvasCtx环境目的做1些’动作’

接下去的动作就很轻易了,大家看上边

let picBase64 = canvas.toDataURL('image/jpeg', 1)//canvas里面是二进制二进制2222222222222
let fd = new FormData()
let blob = ImgUtil.base64ToBlob(picBase64)//不是blob,你传不了,这里不多解释这个,网上解释很多----你可以用atob()这个方法来,但是这个方法有挺大的缺陷,不过兼容性很好了,而且
你要对它进行切割切割,因为前面会有些emmit----》九九归一,来个new Blob()统统搞定
fd.append('pic', blob)

 OK,到那边,你能够拿上你的接口,把那东西甩过去了。当然,并不是有所情形都是那样子,你得和你的后端小伙伴协定好,到底要怎么样的多少。

网站地图xml地图