>

Canvas绘制文本及图片的基础教程,Game开采种类文

- 编辑:www.bifa688.com -

Canvas绘制文本及图片的基础教程,Game开采种类文

  在此以前,提议安装新型版火狐浏览器依旧Chrome,编辑器笔者使用的是Dreamweaver,当然,记事本也得以,只要满意这一个原则,那么,一切都早就准好了,大家能够先导奇妙的html5之旅了!

HTML5 Canvas绘制文本及图片的基础教程,

制图像和文字本

在HTML5中,大家还是能够在Canvas「画布」上制图我们所需的公文文字,当中所关联到的CanvasRenderingContext2D对象的最重要品质和方法如下:

属性或方法 基本描述
font 设置绘制文字所使用的字体,例如20px 宋体,默认值为10px sans-serif。该属性的用法与css font属性一致,例如italic bold 14px/30px Arial,宋体
fillStyle 用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
fillText(string text, int x, int y[, int maxWidth]) 从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的,如果文本内容宽度超过该参数设置,则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle
strokeText(string text, int x, int y[, int maxWidth]) 从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的,如果文本内容宽度超过该参数设置,则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致,不过strokeText()绘制的文字内部是非填充(空心)的,fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle

从地点的API描述消息中大家能够识破,在Canvas中能够利用三种格局来绘制文本文字:1种是采取fillText() fillStyle来绘制填充(实心)的文字;1种是行使strokeText() strokeStyle绘制非填充(空心)的文字。

下边,大家先来看望哪些使用canvas绘制实心文字,具体html代码如下:

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <title>HTML5 Canvas绘制文本文字入门示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!-- 增加canvas标签,并加上卡其灰边框以便于在页面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 您的浏览器不扶助canvas标签。   
  12. </canvas>   
  13.   
  14. <script type="text/javascript">   
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //轻巧地检测当前浏览器是还是不是扶助Canvas对象,以防在部分不帮忙html5的浏览器中晋升语法错误   
  18. if(canvas.getContext){     
  19.     //获取相应的CanvasRenderingContext二D对象(画笔)   
  20.     var ctx = canvas.getContext("2d");   
  21.        
  22.     //设置字体样式   
  23.     ctx.font = "30px Courier New";   
  24.     //设置字体填充颜色   
  25.     ctx.fillStyle = "blue";   
  26.     //从坐标点(50,50)开首绘制文字   
  27.     ctx.fillText("CodePlayer 中文测试", 50, 50);   
  28. }   
  29. </script>   
  30. </body>   
  31. </html>  

相应的来得效果如下:
图片 1

随后,大家使任何遭逢条件均保持不改变,再一次使用strokeText() strokeStyle格局来绘制上述示范中的文字,对应的JavaScript代码如下:

JavaScript Code复制内容到剪贴板

  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //轻易地质量评定当前浏览器是还是不是支持Canvas对象,以防在一部分不支持html5的浏览器中提醒语法错误   
  5. if(canvas.getContext){     
  6.     //获取相应的CanvasRenderingContext贰D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");   
  8.        
  9.     //设置字体样式   
  10.     ctx.font = "30px Courier New";   
  11.     //设置字体颜色   
  12.     ctx.strokeStyle = "blue";   
  13.     //从坐标点(50,50)开头绘制文字   
  14.     ctx.strokeText("CodePlayer 汉语测试", 50, 50);   
  15. }   
  16. </script>  

大家重新行使浏览器访问页面,将会看到如下显示效果(效果图片中的"CodePlayer"字样其实也是空心的,只是出于字体不大导致两侧看起来重叠在了合伙):
图片 2

绘图图片 在html5中,除了利用canvas绘制矢量图形之外,我们仍是能够在canvas「画布」上绘制现存的图像文件。

第壹,我们来探视使用canvas绘制图像文件供给用到CanvasRenderingContext贰D对象的什么重要质量和章程:

XML/HTML Code复制内容到剪贴板

  1. drawImage(mixed image, int x, int y)  

以canvas上点名的坐标点开首,根据图像的原始尺寸大小绘制整个图像。这里的image能够是Image对象,也得以是Canvas对象(下同)。

XML/HTML Code复制内容到剪贴板

  1. drawImage(mixed image, int x, int y, int width, int height)  

以canvas上点名的坐标点初阶,以钦命的大大小小(width和height)绘制整个图像,图像将基于内定的尺码自动举行相应的缩放。
drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
将钦点图像的1部分图像(以(imageX, imageY)为左上角、宽度为imageWidth、中度为imageHeight的矩形部分)绘制到canvas中以(canvasX,canvasY)为左上角坐标、宽度为canvasWidth、中度为canvasHeight的矩形区域中
科学,你从未看错。要在canvas中绘制图像,大家得以采纳三个名字为drawImage()的不二等秘书技,然则该方法具有三种分化的变体,各个方法变体允许收取的参数不仅仅数量不一样,连参数的意义也不尽一样。

在此地,大家对上述四个变体分别比如表达。

率先,大家利用drawImage()的第三个变体在canvas上制图谷歌(Google)的logo图片(原始尺寸为550 x 190)。

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <title>HTML伍 Canvas绘制图像入门示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!-- 增添canvas标签,并累加铁黑边框以便于在页面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 你的浏览器不协理canvas标签。   
  12. </canvas>   
  13.   
  14. <script type="text/javascript">   
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //轻易地检查实验当前浏览器是还是不是帮衬Canvas对象,避防在有个别不援助html五的浏览器中提醒语法错误   
  18. if(canvas.getContext){     
  19.     //获取相应的CanvasRenderingContext二D对象(画笔)   
  20.     var ctx = canvas.getContext("2d");   
  21.        
  22.     //创制新的图片对象   
  23.     var img = new Image();   
  24.     //钦命图片的UXC90L   
  25.     img.src = "";   
  26.     //浏览器加载图片完毕后再绘制图片   
  27.     img.onload = function(){   
  28.         //以Canvas画布上的坐标(十,10)为起头点,绘制图像   
  29.         ctx.drawImage(img, 10, 10);                
  30.     };   
  31. }   
  32. </script>   
  33. </body>   
  34. </html>  

相应的呈现效果如下:
图片 3

由于谷歌(Google)的图标图像过大,超过了canvas的尺码范围,由此不得不展现出图像的壹有个别。此时,大家使用第壹个变体将谷歌的logo图像裁减到内定的升幅和冲天,并绘制到canvas中。

JavaScript Code复制内容到剪贴板

  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //轻巧地检查评定当前浏览器是或不是扶助Canvas对象,防止在有的不帮衬html五的浏览器中唤醒语法错误   
  5. if(canvas.getContext){     
  6.     //获取相应的CanvasRenderingContext2D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");   
  8.        
  9.     //创立新的图样对象   
  10.     var img = new Image();   
  11.     //钦定图片的U宝马7系L   
  12.     img.src = "";   
  13.     //浏览器加载图片完毕后再绘制图片   
  14.     img.onload = function(){   
  15.         //以Canvas画布上的坐标(10,拾)为起头点,绘制图像   
  16.         //图像的宽窄和冲天分别缩放到350px和100px   
  17.         ctx.drawImage(img, 10, 10, 350, 100);                
  18.     };   
  19. }   
  20. </script>  

笔者们将谷歌的logo图像进行缩放后,此时就足以在canvas中观望全部图像了:
图片 4

末尾,我们运用第六个主意变体将谷歌(Google)logo中的"Goo"部分图像绘制到canvas中("Goo"部分的图像大小可以动用Photoshop等工具度量得出,这里向来利用衡量后的结果)。

JavaScript Code复制内容到剪贴板

  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //简单地检查测试当前浏览器是还是不是帮助Canvas对象,防止在有的不扶助html五的浏览器中唤醒语法错误   
  5. if(canvas.getContext){     
  6.     //获取相应的CanvasRenderingContext二D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");   
  8.        
  9.     //创设新的图形对象   
  10.     var img = new Image();   
  11.     //钦定图片的UOdysseyL   
  12.     img.src = "";   
  13.     //浏览器加载图片实现后再绘制图片   
  14.     img.onload = function(){   
  15.         /*  
  16.          * 将图像左侧的"Goo"部分(即以坐标(0,0)为左上角坐标、宽度为332px、中度为190px的1对图像)  
  17.          * 绘制到canvas中以坐标(10,拾)为左上角、宽度为332px、中度为190px的矩形区域  
  18.          *  
  19.          * canvas绘制图像的靶子区域的大幅度和可观与截取的一些图像尺寸保持1致,  
  20.          * 就象征不开始展览缩放,以原始尺寸截取部分图像  
  21.          */           
  22.         ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332, 190);                
  23.     };   
  24. }   
  25. </script>  

此时,大家就足以观望canvas中展现的"Goo"局地图像了:
图片 5

Canvas绘制文本及图片的基础教程, 绘制文本 在HTML5中,大家仍是能够在Canvas「画布」上制图大家所需的公文文字,个中所波及到的Canva...

前文

深信接触过局地canvas的青年们都应当会有如此的一句惊讶: canvas 强 真的强!
不只可以够静态的创制一些大家用普通标签异常的小概完成的图样,而且还是能让这么些图片动起来.

其实在骨子里的费用中,若是你只会用canvas画一些矩形啊,三角形啊,5角星等等的事物自然是远远不足的.
因为确实在开采中,canvas超越四分之二都以用来对图纸以及录像做拍卖,所以博主明天在此间想要介绍的是有个别有关canvas对图纸的管理

 

一. 引用图片

作者们清楚想在网页中显示一张图纸,大家只必要用<img src="">就能够实现了,那么在canvas中大家是怎样插入一张图纸的呢.

一.率先在body中开创好二个canvas标签

<body>
  <canvas id="canvas" width="500" height="500"></canvas>
</body>

二.在js代码中获得canvas并创造三个<img>成分

<script>
        let canvas = document.querySelector('#canvas')  //获取canvas对象
        let ctx = canvas.getContext('2d')             //获取2d上下文
        let img = new Image()                            //创建img
        img.src = 'img/green.jpg'                        //给img添加资源
</script>

三.​ 绘制img,思量到图片是从互连网加载,如若 drawImage 的时候图片还尚无完全加载成功,则什么都不做,个别浏览器会抛十分。所以我们理应保险在 img 绘制达成之后再 drawImage

<script>
        let canvas = document.querySelector('#canvas')
        let ctx = canvas.getContext('2d')
        let img = new Image()
        img.src = 'img/green.jpg'
        //图片是否已经加载完成
        img.onload = function () {
            ctx.drawImage(this, 100, 100, this.width / 2, this.height / 2)
        }
    </script>

通过上面的四个步骤,这时候张开你们的浏览器就足以在页面中看到相应的图片了.
这里首要选取的是drawImage以此办法,下边是对其的局地详实讲授.

  首先,大家创立多个主干的html5页面

2.解析drawImage( )

对于drawImage()这些法子,有三种接纳的主意:

 

第一种:

只传入3个参数

drawImage(image,x,y)

参数1: image:
指的正是您的图形对象,
也正是您let img = new Image()中的img
参数2 : x
图表相对于画布原点(0,0)也正是画布的最左上角 的x轴方向的坐标
参数3: y
图形相对于画布原点(0,0)也正是画布的最左上角 的y轴方向的坐标

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title></head>
<body>
<canvas id="scene" width="800" height="600"></canvas>
</body>
</html>

第二种:

传入5个参数

drawImage(image,x,y,width,height)

前面三个参数和率先种的使用格局一样.

参数4,5: width 和 height
能够规定图片的升幅和中度.
如:在画布(十0,100)的地点插入一张300*300的图片

        img.onload = function () {
            ctx.drawImage(this, 100, 100, 300, 300)
        }

那么利用width和height我们得以窥见,想要将图纸缩减为其原来大小的5/10,就能够这么写:

        img.onload = function () {
            ctx.drawImage(this,100,100,this.width / 2, this.height / 2)
        }

 

第三种:

传入9个参数
当在drawImage()中传来玖个参数后,那几个情势的用法将和近期俩种不均等了.

它的用法是从图片中截取一定尺寸的图纸,并
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height)

其两种的运用情势传送的是八个参数,

参数1 : image
要么图片的目的

参数贰,3 : 从一张大图上点名要截取小图的职分(x,y)坐标
参数4,伍: 从一张大图上点名要截取小图的大大小小
参数陆,七: 从一张大图上截取下来的小图要放在canvas(画布)中的地点(x,y)
参数8,9: 截取下来小图规定的宽高

一般来讲图中,有5架小飞机,作者只想截取最终壹架并展现在画布中.

![herofly.png

图片 6

9G0A~6SHJ`)CJ8AUM8__[LO.png]()

整张图的宽度是330px,1架飞机正是6陆px,所以最后一张图正是从6陆 * 三 = 198px的岗位上马截取,截取完后位居画布(0, 0)的职分

var img1 = new Image()
img1.src = 'img/herofly.png'
drawImage(img1, 198, 0, 66,  82, 0, 0, 66, 82)

  相比较XHTML,它的头顶证明变短了,没有须求进入那持久1串U途胜L地址了,而且meta标签的表达也简化了!这 里咱们就建立了三个主旨的html5页面,使用UTF-八编码!而且大家还采用了三个canvas标签!html伍因此canvas提供了相关图形管理接口,大家通过它就足以管理头眼昏花的图样了,在canvas中大家能够绘制种种图片,比如矩形,圆行,直线,曲线等,同有时候出能够绘制各样现存图片!

3.canvas中的动画

上边的例证,笔者将要canvas(下称为画布)上制图一张小图片(Smart)(在这边,作者假诺大家已总裁解了帧与七喜(Smart)的概念!如若对那七个概念不打听的自动查询)!

3.1 requestAnimationFrame的简介

咱俩应用常见的定时器来贯彻动画的写法为:

var x = 0;

function animate(){
  //清除画布内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x  = 2;
  ctx.fillStyle = "red";
  ctx.fillRect(x, 0, 50, 50);
  if (x > 200){
    return;
  }
  setTimeout(animate,30);
}
animate();

能够见到地方的卡通片是靠setTimeout那么些沙漏每隔30皮秒调用贰回animate() 来贯彻的.

这种使用机械漏刻来兑现动画效果在运动端实际来讲是很不可取的,在活动端上看出的动画会很卡顿,形成用户体验很不流程.
据此ES六新扩大了多个像样于计时器的API:
requestAnimationFrame()
它唯有2个参数,便是要实行的函数.

动用requestAnimationFrame达成动画

var x = 0;

function animate(){
  //清除画布内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x  = 2;
  ctx.fillStyle = "red";
  ctx.fillRect(x, 0, 50, 50);
  if (x > 200){
    return;
  }
  requestAnimationFrame(animate);           //唯一不同
}
animate();

能够见见俩段代码的差别,仅仅是二个用的是setTimout,一个是requestAnimationFrame

setTimout表示的是: 每隔30微秒,实行叁遍animate()函数.
而requestAnimationFrame 在一秒中实践多少次是由它的应用场景决定的,一般都能落得58~60回.也正是1000/60(也正是机械漏刻1六皮秒推行壹回)

那么这里收获的一千/60正是1帧.两样的风貌帧数恐怕会不相同样.

 

3.二 canvas中切换图片的动画片

依旧选拔方面包车型地铁这种飞机图.小编今日想完成一个从第一架完整飞机变化到结尾1架爆炸飞机的效果.

图片 7

herofly.png

那么有心的小伙就能够发觉了,在js中我们想达成图片的切换,只要退换背景图的background-position就足以了,那么在canvas中采取的正是requestAnimationFrame同盟drawImage了.

假定不停的变动截取图片的职分就足以了.
大家来看上面包车型地铁demo一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>爆炸飞机切换</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    let windowW = document.body.clientWidth
    let windowH = document.body.clientHeight
    let canvas = document.querySelector('#canvas')
    canvas.width = windowW
    canvas.height = windowH
    let ctx = canvas.getContext('2d')
    let frame = 0       //帧数
    let img1 = new Image()
    img1.src = 'img/herofly.png'

    //定义变量:图片截取的位置(x,y) 图片截取的宽高(w,h) 整张大图的宽度, 截取的飞机在canvas中的位置(iX, iY)
    let x = 0, y = 0, w = 66, h = 82, img1W = 330, iX = 0, iY = 0;

    animate()
    function animate() {
        //定义一个帧数的变量,函数每一帧执行一次,则frame就加一次,以此记录帧数
        frame  
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        //每过20帧执行一次 x  = w 以此达到切换图片的效果
        if(frame % 20 === 0 ) {
            x  = w
            if (x >= img1W - w) {   //判定当走到最后一张爆炸图的时候,让x又等于0, 达到无限动画的效果
                x = 0
            }
        }
        //每隔一帧就执行绘画飞机的操作
        ctx.drawImage(img1, x, y, w, h, iX, iY, w, h)

        //为避免frame加到太大,在这里做一个当frame加到10000时,又让它为0的操作
        if(frame > 10000 ) {
            frame = 0
        }

        //利用requestAnimationFrame达到动画效果
        requestAnimationFrame(animate)
    }
</script>
</body>
</html>
var ctx = document.getElementById("scene").getContext("2d");
var img = new Image();
img.onload=function(){
    ctx.drawImage(img,0,0,75,70,0,0,75,70);
}
img.src="dragon.gif";

3.3 canvas中图纸运动的动画片

地方我们介绍的是在一张大图中,持续改观它截取图片的地方(也正是x, y ),来完毕切换图片的效果.这种转化某个类似于"静态的转折".

那么哪些让图片在canvas中活动呢,更动的便是我们drawImage()中的第4,几个参数(约等于截取下来的图样在canvas中的地方)

也许使用demo第11中学的这张益德机图,只可是本次作者不让它"爆炸"了(不实行图片切换),而是让它从canvas的最上面飞到最上方

来看demo2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>爆炸飞机切换</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    let windowW = document.body.clientWidth
    let windowH = document.body.clientHeight
    let canvas = document.querySelector('#canvas')
    canvas.width = windowW
    canvas.height = windowH
    let ctx = canvas.getContext('2d')
    let frame = 0       //帧数
    let img1 = new Image()
    img1.src = 'img/herofly.png'

    //定义变量:图片截取的位置(x,y) 图片截取的宽高(w,h) 整张大图的宽度, 截取的飞机在canvas中的位置(iX, iY)
    let x = 0, y = 0, w = 66, h = 82, img1W = 330, iX = 0, iY = canvas.height - h;

    animate()
    function animate() {
        //定义一个帧数的变量,函数每一帧执行一次,则frame就加一次,以此记录帧数
        frame  
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        //每过20帧执行一次 iY -= 4 以此达到图片运动的效果
        if(frame % 20 === 0 ) {
            iY -= 4
            if (iY <= 0) {   //判定当飞机运动到最上边的时候,让iY又等于画布的高 - 飞机的高, 达到无限动画的效果
                iY = canvas.height - h
            }
        }
        //每隔一帧就执行绘画飞机的操作
        ctx.drawImage(img1, x, y, w, h, iX, iY, w, h)

        //为避免frame加到太大,在这里做一个当frame加到10000时,又让它为0的操作
        if(frame > 10000 ) {
            frame = 0
        }

        //利用requestAnimationFrame达到动画效果
        requestAnimationFrame(animate)
    }
</script>
</body>
</html>

能够看来上面包车型大巴demo二 和 demo一 大概同样,只可是此时改换的是iY而已.

 

三.四 canvas中的录制

在页面中,插入一段摄像,只须要利用<video src="video一.mp5"></video>标签

而在canvas中我们只要求将摄像当图片一样插入,在利用canvas中的动画让它达到播放的效果.

例1:

<body>
<div class="out">
    <video id="video1" src="img/xiaoyin.mp4" style="width:300px;" autoplay></video>
    <canvas id="myCanvas" width="1000" height="300"></canvas>
</div>

<script>
    let canvas = document.querySelector("#myCanvas")
    let ctx = canvas.getContext("2d")
    let imgObj = document.querySelector('#video1')

    function play(){
        ctx.drawImage(imgObj, 0, 0,canvas.width,canvas.height)
        window.requestAnimationFrame(play);
    }
    play()
</script>
</body>

那儿页面中现身的应有是俩个摄像,并且用canvas绘制出来的录制并不会卡顿,效果和直接用video的一样,借令你想只显示canvas的录制的话,能够将video一给display:none掉.
效果图:

图片 8

image.png

  突显结果:

3.伍 蛋黄录像

在介绍批注紫铜色摄像以前,笔者想先介绍叁个很牛x的点子getImageData(),这几个主意能赢得整张图片,大概一片图片区域的保有新闻.
用法为:

        ctx.drawImage(imgObj, 0, 0,canvas.width,canvas.height)
        var imageData = ctx.getImageData(0,0, canvas.width, canvas.height);

来看上面那一个小例子,点击开关生成,将右臂彩色的图样变为铁黄:

图片 9

image.png

点击生成:

图片 10

image.png

<body>
<div class="out">
    <canvas id="canvas" width="300" height="400"></canvas>
    <img id="PutImg" src="" alt="图片 11">
    <input id="btn" type="button" value="生成">
</div>
<script>
    let out = document.querySelector('.out')
    let btn = document.querySelector('#btn')
    let PutImg = document.querySelector('#PutImg')
    let canvas = document.querySelector('#canvas')
    let ctx = canvas.getContext('2d')

    let img = new Image()
    img.src = 'img/01.jpg'

    img.onload=function () {
        ctx.drawImage(img,0,0,canvas.width,canvas.height)

        btn.onclick = function () {

            var imageData = ctx.getImageData(0,0, canvas.width, canvas.height);
            console.log(imageData);
            var pixels = imageData.data;

            //遍历像素点
            for (var i=0; i<pixels.length; i =4){

                var r = pixels[i];
                var g = pixels[i 1];
                var b = pixels[i 2];

                //获取灰色
                var gray = parseInt((r g b)/3);

                pixels[i] = gray;
                pixels[i 1] = gray;
                pixels[i 2] = gray;
            }
            ctx.putImageData(imageData, 0,0);
            let url = canvas.toDataURL()
            PutImg.src = url

            ctx.clearRect(0,0,canvas.width,canvas.height)
        }

    }
</script>
</body>

大家得以将方面获得到的imageData对象打字与印刷出来看下:

图片 12

image.png

那几个imageData对象中有3个属性,分别是data,高度,宽度
那么那个data可以见到是一个数组,而且是贰个长短为4九千0的数组
那就是说这些数组是怎么来的呢.
实在那一个数组存款和储蓄的是具有像素点的水彩音讯
你能够精通为,小编的那张图纸是300x400像素的,也正是有1两千0个像素点,而三个像素点的水彩(也等于rgba) 是由个值组成的,分别是r,g,b,a的值
也正是说数组中每四个值代表的正是贰个像素点的消息.
如前4个值[134,134,134,225] 表示的就是首先个像素点(最左上角的)的音信.
由此在做中黄管理时,大家只须要将每一个像素点的前几个值全体均等的就可以了,然后在选用putImageData()方法来输出一下甩卖好的图片.

而录制的拍卖也是如出壹辙的
在例一的基本功上加以修正:

<body>
<div class="out">
    <video id="video1" src="img/xiaoyin.mp4" style="width:300px;" autoplay></video>
    <canvas id="myCanvas" width="1000" height="300"></canvas>
</div>

<script>
    let canvas = document.querySelector("#myCanvas")
    let ctx = canvas.getContext("2d")
    let imgObj = document.querySelector('#video1')

    function play(){
        ctx.drawImage(imgObj, 0, 0,canvas.width,canvas.height)

        var imageData = ctx.getImageData(0,0, canvas.width, canvas.height);

        var pixels = imageData.data;

        //遍历像素点
        for (var i=0; i<pixels.length; i =4){

            var r = pixels[i];
            var g = pixels[i 1];
            var b = pixels[i 2];

            //获取灰色
            var gray = parseInt((r g b)/3);

            pixels[i] = gray;
            pixels[i 1] = gray;
            pixels[i 2] = gray;
        }

        ctx.putImageData(imageData, 0,0);

        window.requestAnimationFrame(play);
    }
    play()
</script>
</body>

此刻大家的录制就改为郎窑红的了
效果图:

图片 13

image.png

 

图片 14

   大家中标在画布上画出一个机警,第二行交通getContext("二d")得到了2个CanvasRenderingContext2D对象,然后创设了二个Image对象,并在Image加载完结的轩然大波中,使用drawImage方法将大家的敏锐性绘制到了画布上!

  看起来非常粗大略,好像也平素不什么样快乐的,是的,只是一张小小的的图纸,可是总体繁杂的东西不都以加简单的事物组成的吗?我们先来看一下drawImage方法的连锁参数:

  drawImage有五个参数的重载!最多为七个,上边以以7个参数为例解释下依次参数的遵循:drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

 

参数

参数

说明

参数1

image

图片

参数2

sx

图片裁剪的X位置

参数3

sy

图片裁剪的Y位置

参数4

sw

裁剪的宽度

参数5

sh

裁剪的高度

参数6

dx

画布的X位置

参数7

dy

画布的Y位置

参数8

dw

绘制到画布上的宽

参数9

dh

绘制到画布上的高

 

 

  全部办法如下:

  void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh); 
  void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh); 
  void  drawImage(in  HTMLCanvasElement  image,  in  float  dx,  in  float dy, optional in float dw, in float dh); 
  void  drawImage(in  HTMLCanvasElement  image,  in  float  sx,  in  float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh); 
  void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw, in float dh); 
  void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);

 

  利用CanvasRenderingContext2D对象还足以拓展像素级的操作,这么些本人将会在中期讲到,近来即使利用drawImage方法就足以做出过多有趣的事物来了!

 

  下边大家来做3个会动的敏锐性!其实各样动画,都以由一于海张的图样(帧)火速切换而获得的!上面,大家将利用那一个规律,每隔一定时期,从底下的图纸上截取一张小图片绘制到画布上,产生动画,让小红龙扇动双翅!

  首先要用到一张大图: 

  

图片 15

 

  代码:

var ctx = document.getElementById("scene").getContext("2d");
var img = new Image();
var x =0;
img.onload=function(){
    setInterval(function(){
        if(x>=9){
            x=0;
        }else{
            x  ;
        }

        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.drawImage(img,x * 75,0,75,70,n,0,75,70);
    },50)
}
img.src="1.jpg";

 

  在此间,使用了放大计时器,每隔50阿秒(注意,这几个不肯定是可靠数字)就能在图纸截取一张7五 * 70像素大小的小图并绘制出来,且每趟向右移75像素,直到到最右端时再次从0伊始,不停循环!小红龙就伊始不停扇动羽翼了!

 

  动态图就不放出来了,大家能够下载上面包车型大巴文书档案直接在该地演示!

 

  后天本文暂且就到这里,下1节演示如何让小红龙起始飞行,与碰撞检查测试。并附上四个小特效!

 

  下载地址:

  目录:

 

  第二遍写那样的事物,开采挺累的!Orz...

 

  十二月三16日补给:回头看了看前二日写的那篇小说,突然开掘其实这个剧情在网络都能够找获得,于是犹豫了,行吗,笔者肯定小编有一点因噎废食,作者在想这么的源委有没有要求继续写下去,我的大意筹算是那般的,第1片段写一下HTML5的基本知识,第3部分封装部分代码,达成可重利用,第一有个别,管理地图,效果,与打野等剧情。可是自身以往有个别犹豫,要不要连续写下去呢?新来的对象给点意见呢!


本文由必发88官网发布,转载请注明来源:Canvas绘制文本及图片的基础教程,Game开采种类文