澳门新萄京:方法裁剪区域图像,利用HTML5中的
分类:澳门新萄京最大平台

用HTML5 Canvas画一张笑颜

2015/02/24 · HTML5 · 2 评论 · Canvas, HTML5

本文由 伯乐在线 - cucr 翻译,JustinWu 校稿。未经许可,制止转发!
爱沙尼亚语出处:code.tutsplus.com。应接加入翻译组。

澳门新萄京 1

今日,你将学习一项称为Canvas(画布卡塔尔的web技巧,以致它和文书档案对象模型(平时被称呼DOM卡塔 尔(阿拉伯语:قطر‎的关系。那项技巧极其苍劲,因为它使web开荒人士能够因此应用JavaScript访问和改正HTML成分。

今后您只怕想知道为啥大家须要雷霆万钧地动用JavaScript。总的来说,HTML和JavaScript是相互依存的,一些HTML组件,如canvas成分,并不可能脱离JavaScript单独使用。终归,假若我们不能够在地点绘制,那canvas能派什么用场呢?

为了越来越好地理解那几个概念,大家意气风发并通过二个示范项目来尝试画叁个粗略的笑容。让大家起首吧。

动用HTML5中的Canvas绘制一张笑颜的教程,html5canvas

那篇小说重要介绍了运用HTML5中的Canvas绘制一张笑貌的教程,使用Canvas实行绘图是HTML5中的根底效,需求的朋友能够参见下

澳门新萄京 2前几日,你将学习黄金时代项称为Canvas(画布卡塔尔国的web技术,以至它和文书档案对象模型(日常被称之为DOM卡塔尔的关系。那项技艺特别苍劲,因为它使web开采人士能够通过应用JavaScript访问和校正HTML成分。

今后您只怕想明白怎么大家须求雷霆万钧地行使JavaScript。说来讲去,HTML和JavaScript是相互依存的,一些HTML组件,如canvas成分,并不能够脱离JavaScript单独使用。终归,假若我们不可能在地点绘制,那canvas能派什么用项吧?

为了更加好地领会那么些定义,我们一同经过一个演示项目来品尝画叁个简洁明了的笑脸。让我们起头吧。
开始

先是成立三个新目录来保存你的类型文件,然后张开你最赏识的公文编辑器或web开辟工具。大器晚成旦你这么做了,你应有成立四个空的index.html和三个空的script.js,之后大家将继续编辑。

澳门新萄京 3
接下去,大家来矫正index.html文件,那不会提到好些个东西,因为大家项指标绝大好多代码将用JavaScript编写。大家要求在HTML中做的是创制三个canvas成分和援引script.js,这一定干净俐落:  

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

  1. <!DOCTYPE html><body>  
  2.     
  3.    <canvas id='canvas' width='640' height='480'></canvas>  
  4.    <script type='text/javascript' src='script.js'></script>  
  5.     
  6. </body></html>  
  7.   

那般解释,笔者使用后生可畏组标志< html >和< body>,那样,大家得以经过body为文书档案增添更加的多的要素。抓住那一个空子,笔者完成了一个id属性为canvas的640*480的canvas元素。

其后生可畏特性只是简短地为要素加上壹个字符串,目标是为了唯意气风发识别,稍后我们将采取那些天性,在JavaScript文件中固定我们的canvas成分。接下来,大家再使用<script>标志援引JavaScript文件,它钦赐JavaScript的语言类型和script.js文件的渠道。
操作DOM

如其名称“文书档案对象模型”,大家必要通过使用另一种语言,调用接口访谈HTML文书档案,在这里边,大家接纳的言语是JavaScript。为此,大家必要在存放文书档案对象上的布阵三个简便援用。那个指标直接对应于大家的< html >标识,相通的,它是漫天项目标底子,因为大家能够通过它来得到成分,推行变化。  

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

  1. var canvas = document.getElementById('canvas');   
  2.   

还记得大家什么样使用id =“canvas”来定义二个canvas成分吗?今后大家利用document.getElementById方法,从HTML文书档案获取那些成分,大家简要地传递相配所需成分id的字符串。现在大家早就得到了那个成分,接下去就能够用其进展写生专业了。

为了利用canvas进行油画,大家亟须操作它的上下文。令人切齿的是,三个canvas不带有其余绘图的方法或品质,不过它的上下文对象有大家须求的保有办法。二个上下文定义如下所示:

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

  1. var context = canvas.getContext('2d');   
  2.   

每叁个canvas有多少个例外的上下文,依据程序的指标,只须要叁个二维的上下文就足足了,它将得到大家需求制造笑颜的持有绘图方法。

在我们初叶早先,作者必须告知您,上下文存款和储蓄了二种颜色属性,三个用于画笔(stroke卡塔尔国,一个用以填充(fill卡塔 尔(英语:State of Qatar)。对于大家的笑貌,需求安装填充为香艳,画笔为铁黄。  

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

  1. context.fillStyle = 'yellow';   
  2. context.strokeStyle = 'black';   
  3.   

安装完上下文所需的水彩后,大家必得为脸画贰个圆。不幸的是,上下文中未有圆的预订义方法,因此大家必要动用所谓的门路(path卡塔尔。路径只是一文山会海的每每的直线和曲线,路线在绘图完结后关闭。  

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

  1. context.beginPath();   
  2. context.arc(320, 240, 200, 0, 2 * Math.PI);   
  3. context.fill();   
  4. context.stroke();   
  5. context.closePath();   
  6.   

如此解释,大家选用上下文初步二个新的门径。接下来,大家在点(320、240)上制造三个半径为200像素的弧形。最后八个参数内定创设圆弧的发轫和最终角度,所以我们传递0和2 *Math.PI,来创立二个完璧归赵的圆。最终,我们应用上下文基于大家早就安装的水彩实行填空并画出路线。

纵然关闭路线不是本子的功能所不可不的,但大家依旧需求关闭路线,那样就可以起来绘制笑颜中新的眸子和嘴。眼睛能够由此平等的章程产生,各类眼睛须要异常的小的半径和莫衷一是的岗位。但首先大家亟须铭记设置填充颜色为鲜青。  

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

  1. context.fillStyle = 'white';   
  2.     
  3. context.beginPath();   
  4. context.arc(270, 175, 30, 0, 2 * Math.PI);   
  5. context.fill();   
  6. context.stroke();   
  7. context.closePath();   
  8.     
  9. context.beginPath();   
  10. context.arc(370, 175, 30, 0, 2 * Math.PI);   
  11. context.fill();   
  12. context.stroke();   
  13. context.closePath();   
  14.   

以上是关于眼睛的保有代码。现在嘴巴很日常,但此番我们不会填满圆弧,大家的角度将陈设为三个半圆。要做到这点,大家需求设置初叶角度为零和了结角度为-1 * Math.PI。请记住,不要遗忘将画笔的颜色设置为革命。  

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

  1. context.fillStyle = 'red';   
  2.     
  3. context.beginPath();   
  4. context.arc(320, 240, 150, 0, -1 * Math.PI);   
  5. context.fill()   
  6. context.stroke();   
  7. context.closePath();   

祝贺

干的不易。你早已到位了本学科,你做了三个很棒的笑颜,同期学习了越多关于Canvas、HTML、JavaScript,和文书档案对象模型的知识。要是您有其余难题,请留言。

那篇文章重要介绍了动用HTML第55中学的Canvas绘制一张笑颜的课程,使用Canvas进行绘图是HTML5中的基...

行使HTML5 Canvas API中的clip()方法裁剪区域图像,html5canvas

运用Canvas绘制图像的时候,我们日常会想要只保留图像的一片段,那是大家得以使用canvas API再带的图像裁剪成效来兑现那黄金时代冥思苦想。
Canvas API的图像裁剪功效是指,在画布内接受路线,只绘制该路径内所含有区域的图像,不会只路线外的图像。这有一点点像Flash中的图层遮罩。

动用图形上下文的不带参数的clip()方法来促成Canvas的图像裁剪作用。该办法运用路线来对Canvas话不安装一个裁剪区域。因而,必需先创立好门路。成立完整后,调用clip()方法来安装裁剪区域。
须要注意的是裁剪是对画布实行的,裁切后的画布不能够回复到原本的轻重,约等于说画布是越切越小的,要想保障最后还是能在canvas最先定义的大大小小下绘图需求潜心save()和restore()。画布是先裁切完了再开展绘图。并不一定非纵然图表,路线也能够放进去~

先来探问二个精练的德姆o。

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>裁剪区域</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器照旧不协助Canvas?!急速换一个呢!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         //在荧屏上绘制多少个大方块   
  28.         context.fillStyle = "black";   
  29.         context.fillRect(10,10,200,200);   
  30.         context.save();   
  31.         context.beginPath();   
  32.   
  33.         //裁剪画布从(0,0)点至(50,50)的方框形   
  34.         context.rect(0,0,50,50);   
  35.         context.clip();   
  36.   
  37.         //红色圆   
  38.         context.beginPath();   
  39.         context.strokeStyle = "red";   
  40.         context.lineWidth = 5;   
  41.         context.arc(100,100,100,0,Math.PI * 2,false);   
  42.         //整圆   
  43.         context.stroke();   
  44.         context.closePath();   
  45.   
  46.         context.restore();   
  47.   
  48.         //再一次裁切整个画布   
  49.         context.beginPath();   
  50.         context.rect(0,0,500,500);   
  51.         context.clip();   
  52.   
  53.         //绘制三个尚未裁切的蓝线   
  54.         context.beginPath();   
  55.         context.strokeStyle = "blue";   
  56.         context.lineWidth = 5;   
  57.         context.arc(100,100,50,0,Math.PI * 2,false);   
  58.         //整圆   
  59.         context.stroke();   
  60.         context.closePath();   
  61.     };   
  62. </script>   
  63. </body>   
  64. </html>  

运维结果:
澳门新萄京 4

错落使用save()和restore()方法,我们得以界定画画区域。首先大家得以行使rect()方法包围二个我们期待画画的区域,然后利用clip()方法把该区域裁剪下来。

这么之后大家不管在context中做了什么样操作,唯有节制的局地显得出来。也正是说clip()的效率是限量要显得的区域。当大家不指望持续约束区域了,能够使用restore()方法跳出来,继续操作原来的context。
再来看这么多个裁剪:
澳门新萄京 5

JavaScript Code复制内容到剪贴板

  1. function drawScreen() {   
  2.         var x = canvas.width / 2;   
  3.         var y = canvas.height / 2;   
  4.         var radius = 75;   
  5.         var offset = 50;   
  6.   
  7.         //裁剪的区域为 (x, y)为主导半径为75的圆   
  8.         context.save();   
  9.         context.beginPath();   
  10.         context.arc(x, y, radius, 0, 2 * Math.PI, false);   
  11.         context.clip();   
  12.   
  13.         // 先画贰个紫淡绿的圆弧, 超越裁剪的部分不出示   
  14.         context.beginPath();   
  15.         context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);   
  16.         context.fillStyle = 'blue';   
  17.         context.fill();   
  18.   
  19.         // 画二个艳情的弧形, 超越裁剪的风流倜傥对不展现   
  20.         context.beginPath();   
  21.         context.arc(x   offset, y, radius, 0, 2 * Math.PI, false);   
  22.         context.fillStyle = 'yellow';   
  23.         context.fill();   
  24.   
  25.         // 画二个革命的半圆形, 超越裁剪的后生可畏部分不显得   
  26.         context.beginPath();   
  27.         context.arc(x, y   offset, radius, 0, 2 * Math.PI, false);   
  28.         context.fillStyle = 'red';   
  29.         context.fill();   
  30.   
  31.         /*  
  32.          * restore()方法会重返到context原先的情状,在这里地是clip()以前的景况。  
  33.          * 我们能够移除context.beginPath()方法,试试会暴发怎么着。  
  34.          */  
  35.         context.restore();   
  36.         context.beginPath();   
  37.         context.arc(x, y, radius, 0, 2 * Math.PI, false);   
  38.         context.lineWidth = 10;   
  39.         context.strokeStyle = 'blue';   
  40.         context.stroke();   
  41.     }  

   
双重重申,通常采用裁剪成效的调用格局是

save();
clip();
restore();
以此顺序来举行调用。

Canvas API中的clip()方法裁剪区域图像,html5canvas 使用Canvas绘制图像的时候,大家常常会想要只保留图像的大器晚成都部队分,这是我们得以应用...

HTML5 canvas基本绘图之绘制曲线,html5canvas

<canvas></canvas>是HTML5中新添的价签,用于绘制图形,实际上,这些标签和此外的价签相符,其特别之处在于该标签能够获得二个CanvasRenderingContext2D对象,大家可以通过JavaScript脚本来调节该指标开展绘图。

<canvas></canvas>只是一个绘制图形的器皿,除了id、class、style等属性外,还应该有height和width属性。在<canvas>>元素上绘制主要有三步:

1.拿走<canvas>成分对应的DOM对象,那是二个Canvas对象;
2.调用Canvas对象的getContext()方法,得到二个CanvasRenderingContext2D对象;
3.调用CanvasRenderingContext2D对象开展绘图。

绘图曲线

跟绘制曲线的有八个函数,分别是:

•context.arc(x,y,r,sAngle,eAngle,counterclockwise);用来创建弧/曲线(用于成立圆或一些圆卡塔 尔(阿拉伯语:قطر‎。选用的参数含义:
| 参数 | 含义 |
| :————- |:————-|
| x | 圆的主干的 x 坐标 |
|y|圆的基本的 y 坐标|
|r|圆的半径|
|sAngle|最先角,以弧度计(弧的圈子的三点钟职责是 0 度卡塔 尔(阿拉伯语:قطر‎|
|eAngle|甘休角,以弧度计|
|counterclockwise|可选。规定应该逆时针依然顺时针绘图。False = 顺时针,true = 逆时针|

上面是几个arc()函数的多少个示范: 

JavaScript Code复制内容到剪贴板

  1. var canvas = document.getElementById("canvas");   
  2. var context = canvas.getContext("2d");   
  3.   
  4. context.strokeStyle = "#F22D0D";   
  5. context.lineWidth = "2";   
  6. //绘制圆   
  7. context.beginPath();   
  8. context.arc(100,100,40,0,2*Math.PI);   
  9. context.stroke();   
  10.   
  11. //绘制半圆   
  12. context.beginPath();   
  13. context.arc(200,100,40,0,Math.PI);   
  14. context.stroke();   
  15.   
  16. //绘制半圆,逆时针   
  17. context.beginPath();   
  18. context.arc(300,100,40,0,Math.PI,true);   
  19. context.stroke();   
  20.   
  21. //绘制密封半圆   
  22. context.beginPath();   
  23. context.arc(400,100,40,0,Math.PI);   
  24. context.closePath();   
  25. context.stroke();   

作用如下:

澳门新萄京 6

•context.arcTo(x1,y1,x2,y2,r); 在画布上创建介于三个切线之间的弧/曲线。选拔的参数含义:

澳门新萄京 7

这里须求注意的是arcTo函数绘制的曲线的发轫点要求经过moveTo(卡塔尔函数来安装,下边采取arcTo函数绘制二个圆角矩形: 

JavaScript Code复制内容到剪贴板

  1. function createRoundRect(context , x1 , y1 , width , height , radius)   
  2.     {   
  3.         // 移动到左上角   
  4.         context.moveTo(x1   radius , y1);   
  5.         // 增添一条连接到右上角的线条   
  6.         context.lineTo(x1   width - radius, y1);   
  7.         // 增多生机勃勃段圆弧   
  8.         context.arcTo(x1   width , y1, x1   width, y1   radius, radius);   
  9.         // 增多一条连接到右下角的线条   
  10.         context.lineTo(x1   width, y1   height - radius);   
  11.         // 增多意气风发段圆弧   
  12.         context.arcTo(x1   width, y1   height , x1   width - radius, y1   height , radius);   
  13.         // 增加一条连接到左下角的线条   
  14.         context.lineTo(x1   radius, y1   height);    
  15.         // 增多生龙活虎段圆弧   
  16.         context.arcTo(x1, y1   height , x1 , y1   height - radius , radius);   
  17.         // 增加一条连接到左上角的线条   
  18.         context.lineTo(x1 , y1   radius);   
  19.         // 加多后生可畏段圆弧   
  20.         context.arcTo(x1 , y1 , x1   radius , y1 , radius);   
  21.         context.closePath();   
  22.     }   
  23.     // 获取canvas成分对应的DOM对象   
  24.     var canvas = document.getElementById('mc');   
  25.     // 获取在canvas上绘制的CanvasRenderingContext2D对象   
  26.     var context = canvas.getContext('2d');   
  27.     context.lineWidth = 3;   
  28.     context.strokeStyle = "#F9230B";   
  29.     createRoundRect(context , 30 , 30 , 400 , 200 , 50);   
  30.     context.stroke();   
  31.   

意义如下:

澳门新萄京 8

•context.quadraticCurveTo(cpx,cpy,x,y);绘图二回贝塞曲线,参数含义如下:

澳门新萄京 9

曲线的始发点是前段时间路径中最后叁个点。假设路线一纸空文,那么请使用 beginPath() 和 moveTo() 方法来定义开端点。

 •context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 绘制叁回贝塞尔曲线,参数如下:

澳门新萄京 10

如上正是本文的全部内容,希望对我们的读书抱有利于,也期望我们多多点拨帮客之家。

canvas基本绘图之绘制曲线,html5canvas canvas/canvas 是HTML5中新增添的竹签,用于绘制图形,实际上,这些标签和任何的价签雷同,其格外之处...

1.第一个Canvas程序 

开始

首先创制一个新目录来保存你的种类文件,然后张开你最欢乐的公文编辑器或web开垦工具。风流浪漫旦您那样做了,你应当创设八个空的index.html和一个空的script.js,之后大家将一连编辑。

澳门新萄京 11

接下去,我们来修改index.html文件,那不会涉嫌众多事物,因为我们项指标绝大许多代码将用JavaScript编写。大家必要在HTML中做的是创设三个canvas成分和援用script.js,这一定干脆俐落:

XHTML

<!DOCTYPE html><body> <canvas id='canvas' width='640' height='480'></canvas> <script type='text/javascript' src='script.js'></script> </body></html>

1
2
3
4
5
6
<!DOCTYPE html><body>
 
   <canvas id='canvas' width='640' height='480'></canvas>
   <script type='text/javascript' src='script.js'></script>
 
</body></html>

那般解释,笔者使用生龙活虎组标识< html >和< body>,那样,大家得以因而body为文书档案加多更多的成分。抓住那么些时机,笔者形成了二个id属性为canvas的640*480的canvas元素。

本条个性只是简单地为成分加上叁个字符串,目标是为着唯意气风发识别,稍后咱们将动用那脾天性,在JavaScript文件中一定大家的canvas成分。接下来,咱们再利用<script>标识援用JavaScript文件,它钦命JavaScript的言语类型和script.js文件的门径。

 

操作DOM

如其名目“文书档案对象模型”,大家需求经过采纳另后生可畏种语言,调用接口访谈HTML文书档案,在这里边,大家使用的语言是JavaScript。为此,大家须求在放松权利文书档案对象上的陈设一个粗略援用。那个指标直接对应于大家的< html >标识,相同的,它是整套项目标底工,因为大家得以由此它来获得元素,施行变化。

JavaScript

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

1
var canvas = document.getElementById('canvas');

还记得我们怎么着行使id =“canvas”来定义二个canvas成分吗?今后我们接受document.getElementById方法,从HTML文书档案获取这几个因素,大家差不离地传递相配所需成分id的字符串。现在我们曾经赢得了那么些因素,接下去就足以用其进行美术专门的工作了。

为了采用canvas进行写生,大家必须要操作它的上下文。让人惊呆的是,二个canvas不富含别的绘图的情势或性质,但是它的上下文对象有大家须求的享有办法。二个上下文定义如下所示:

JavaScript

var context = canvas.getContext('2d');

1
var context = canvas.getContext('2d');

每八个canvas有多少个不等的上下文,遵照程序的目标,只供给二个二维的上下文就够用了,它将收获大家要求创立笑貌的具备绘图方法。

在大家开头之前,笔者一定要告知您,上下文存款和储蓄了两种颜色属性,贰个用于画笔(stroke卡塔 尔(英语:State of Qatar),三个用来填充(fill卡塔尔。对于大家的笑容,必要设置填充为香艳,画笔为血牙红。

JavaScript

context.fillStyle = 'yellow'; context.strokeStyle = 'black';

1
2
context.fillStyle = 'yellow';
context.strokeStyle = 'black';

安装完上下文所需的颜色后,我们必需为脸画八个圆。不幸的是,上下文中没有圆的预约义方法,因而大家要求使用所谓的门道(path卡塔尔国。路线只是一文山会海的再三的直线和曲线,路线在绘图完毕后关闭。

JavaScript

context.beginPath(); context.arc(320, 240, 200, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();

1
2
3
4
5
context.beginPath();
context.arc(320, 240, 200, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

那样表达,大家应用上下文开头七个新的门径。接下来,大家在点(320、240)上成立一个半径为200像素的拱形。最终四个参数钦点塑造圆弧的初叶和最终角度,所以大家传递0和2 *Math.PI,来成立几个完整的圆。最后,我们接收上下文基于大家早就设置的颜色举办填空并画出路径。

即便关闭路线不是本子的功能所不可不的,但大家依旧必要关闭路线,那样就能够早前绘制笑颜中新的眼眸和嘴。眼睛能够通过同样的秘籍成功,每种眼睛必要非常的小的半径和见仁见智的职分。但首先大家务必记住设置填充颜色为中绿。

JavaScript

context.fillStyle = 'white'; context.beginPath(); context.arc(270, 175, 30, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath(); context.beginPath(); context.arc(370, 175, 30, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();

1
2
3
4
5
6
7
8
9
10
11
12
13
context.fillStyle = 'white';
 
context.beginPath();
context.arc(270, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();
 
context.beginPath();
context.arc(370, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

上述是有关眼睛的具备代码。以往嘴巴很平时,但此番我们不会填满圆弧,大家的角度将布置为多少个半圆。要水到渠成那一点,大家须要设置起初角度为零和终结角度为-1 * Math.PI。请深深记住,不忘记记将画笔的水彩设置为浅浅灰。

JavaScript

context.fillStyle = 'red'; context.beginPath(); context.arc(320, 240, 150, 0, -1 * Math.PI); context.fill() context.stroke(); context.closePath();

1
2
3
4
5
6
7
context.fillStyle = 'red';
 
context.beginPath();
context.arc(320, 240, 150, 0, -1 * Math.PI);
context.fill()
context.stroke();
context.closePath();

看的是HTML5运动支付即学即用那本书,首先学习Canvas底工,废话非常少说,间接看率先个例证。

祝贺

干的准确性。你已经实现了本课程,你做了叁个很棒的笑貌,同有时候学习了更加多关于Canvas、HTML、JavaScript,和文书档案对象模型的学问。假设您有别的难点,请留言。

点击这里查看程序的运维情状.

赞 2 收藏 2 评论

 

关于笔者:cucr

澳门新萄京 12

腾讯网乐乎:@hop_ping 个人主页 · 笔者的作品 · 17

澳门新萄京 13

 

 

 

代码如下:

 

 

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8" />

 5 <style type="text/css">

 6      canvas {

 7     border-width: 5px;

 8     border-style: dashed;

 9     border-color: rgba(20, 126, 239, 0.50)

10 }

11 </style>

12 

13 </head>

14 <body>

15 hello HTML5!

16 <canvas id="c1" width="300" height="300" ></canvas>

17 </body>

18 <script type="text/javascript">

19   //canvas对象的收获

20   var canvas=document.getElementById("c1");

21   //获得绘图用的上下文对象

22   var ctx=canvas.getContext("2d"); 

23   //绘图管理

24   ctx.fillStyle="rgb(255,0,0)";

25   ctx.fillRect(50,50,200,200);

26   ctx.fillStyle="rgba(0,0,255,0.5)";

27   ctx.fillRect(100,100,200,200);

28   <!--alert("hello");-->

29 </script>

30 </html>

复制代码

知识点:

 

Canvas 的中坚用法

 

 1)取得Canvas对象

 

 2卡塔 尔(英语:State of Qatar)从Canvas对象中获取绘图用的上下文

 

 3卡塔 尔(英语:State of Qatar)使用上下文中的方法与性格进行绘图

 

 颜色的钦命方法

 

  1)ctx.fillStyle="#FF0000";

 

  2)ctx.fillStyle="rgb(255,0,0)";

 

  3卡塔尔ctx.fillStyle="rgba(0,0,255,0.5)"; 最终这些指光滑度的。。。

 

2.路径

 

  绘制八个简单的三角,效果:

 

 

 

 代码如下:

 

 

复制代码

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8" />

 5 <style type="text/css">

 6      canvas {

 7     border-width: 5px;

 8     border-style: dashed;

 9     border-color: rgba(20, 126, 239, 0.50)

10 }

11 </style>

12 

13 </head>

14 <body>

15 hello HTML5!

16 <canvas id="c1" width="300" height="300" ></canvas>

17 </body>

18 <script type="text/javascript">

19   //canvas对象的得到

20   var canvas=document.getElementById("c1");

21   //获得绘图用的上下文对象

22   var ctx=canvas.getContext("2d"); 

23   //路线绘制带头

24   ctx.beginPath();

25   //路线的绘图

26   ctx.moveTo(0,0);

27   ctx.lineTo(0,290);

28   ctx.lineTo(290,290);

29   //路线绘制截止

30   ctx.closePath();

31   //实行绘图管理

32   ctx.fillStyle="rgb(200,0,0)"

33   ctx.fill();

34   <!--alert("hello");-->

35 </script>

36 </html>

复制代码

 知识点:

 

 调节路线时采用的方法:

  1) beginPath() 重新载入参数路线的起来

 

  2) closePath() 关闭到现行反革命得了的门道

 

  3) moveTo() 内定绘图初始时的焦点(x,y卡塔 尔(阿拉伯语:قطر‎

 

澳门新萄京:方法裁剪区域图像,利用HTML5中的Canvas绘制一张笑脸的教程。  4) lineTo() 绘制早前壹遍绘图地方到(x,y卡塔 尔(阿拉伯语:قطر‎的直线

 

 绘制路线时选用的措施:

 

 1卡塔尔stroke() 绘制路径

 

 2卡塔 尔(英语:State of Qatar)fill()填充路线

 

 内定绘图样式时使用的性质

 

 1卡塔尔fillStyle 钦点填充时使用的颜料与体制

 

 2卡塔 尔(阿拉伯语:قطر‎strokeStyle 钦赐路径的线颜色与体制

 

 3卡塔 尔(英语:State of Qatar)lineWidth 钦命路径线的粗细

 

  下边制作二个当客商触摸显示器时在触摸地方绘制三角形的实例程序 (书上的是顾客触摸显示器时绘制,以往改一下,鼠标移动时在移动的职位绘制三角形卡塔尔效果:

 

 

 

代码如下:

 

 

复制代码

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8" />

 5 <meta name="viewport" content="width=320,user-scalable=no" />

 6 <style type="text/css">

 7      canvas {

 8     border-width: 5px;

 9     border-style: dashed;

10     border-color: rgba(20, 126, 239, 0.50)

11 }

12 </style>

13 

14 </head>

15 <body>

16 hello HTML5!

17 <canvas id="c1" width="300" height="300" ></canvas>

18 </body>

19 

20 <script type="text/javascript">

21 

22 function getPointOnCanvas(canvas, x, y) {

23   var bbox = canvas.getBoundingClientRect();

24   return { x: x - bbox.left * (canvas.width / bbox.width),

25        y: y - bbox.top * (canvas.height / bbox.height)};

26 }

27   //canvas对象的拿走

28   var canvas=document.getElementById("c1");

29   //获得绘图用的上下文对象

30   var ctx=canvas.getContext("2d"); 

31   //设置Canvas的onmouse事件

32   canvas.onmousemove=function(event)

33   {

34       //获得鼠标移动处的坐标

35       var x=event.pageX;

36       var y=event.pageY;

37       var canvas=event.target;

38       var loc=getPointOnCanvas(canvas,x,y);

39       console.log("mouse down at point(x:" loc.x ",y:" loc.y ")");

40       

41       var r=Math.random()*10 25;

42       //路线钦命

43       

44       ctx.beginPath();

45       ctx.moveTo(loc.x,loc.y);

46       ctx.lineTo(loc.x,loc.y r);

47       ctx.lineTo(loc.x r,loc.y r);

48       ctx.lineTo(loc.x,loc.y);

49       

50       //绘图

51       ctx.strokeStyle="red";

52       ctx.stroke();

53   };

54 </script>

55 </html>

复制代码

相见的主题材料,刚开始取不到鼠标移动处的坐标,借鉴了 那其间的章程,把效果做出来了,注意console.log()的利用,看下代码运营时的成效:

 

 

 

 3.颜色定义

 

 这一小节认为书上争取不太合理,笔者完结以下这些顺序是为着熟习下JS代码

 

 效果:

 

 

 

代码如下:

 

 

复制代码

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8" />

 5 <meta name="viewport" content="width=320,user-scalable=no" />

 6 <style type="text/css">

 7      canvas {

 8     border-width: 5px;

 9     border-style: dashed;

10     border-color: rgba(20, 126, 239, 0.50)

11 }

12 </style>

13 <script> 

14 (function(){

15           window.addEventListener("load",function(){

16                var ctx=document.getElementById("c1").getContext("2d");

17                //圆1

18                ctx.beginPath();

19                ctx.arc(150,45,35,0,Math.PI*2,false);

20                ctx.fillStyle='rgba(192,80,77,0.7)';   

21                ctx.fill();

22                ctx.strokeStyle='rgba(192,80,77,1)';

23                ctx.stroke();

24                

25                //圆2

26                ctx.beginPath();

27                ctx.arc(125,95,35,0,Math.PI*2,false);

28                ctx.fillStyle='rgba(155,187,89,0.7)';

29                ctx.fill();

30                ctx.strokeStyle='rgba(155,187,89,1)';

31                ctx.stroke();

32                

33                //圆3

34                ctx.beginPath();

35                ctx.arc(175,95,35,0,Math.PI*2,false);

36                ctx.fillStyle='rgba(128,100,162,0.7)';

37                ctx.fill();

38                ctx.strokeStyle='rgba(128,100,162,1)';

39                ctx.stroke();},     false);                                                

40           })();

41 </script>

42 </head>

43 <body>

44 hello HTML5!

45 <canvas id="c1" width="300" height="150" ></canvas>

46 </body>

47 </html>

复制代码

知识点:

 

1)描绘轮廓线

 

ctx.strokeStyle="#ff0000";

 

2)填充轮廓

 

ctx.fillStyle="#0000ff";

 

 小编要好从当中练习的知识点应该是

 

  1卡塔尔国无名函数 (function(){})();的接收

 

  2)window.addEventListener("load",function(){},false);

 

4.制图方法的牵线

 

  1) 绘制圆弧的arc()方法

 

      arc()方法的语法如下:context.arc(x,y,半径,早前角度,甘休角度,是不是逆时针旋转);

 

      从钦赐的开头角度开始至甘休角度为止,按内定方向举办圆弧绘制。最终的参数为ture时,将按逆时针旋转。角度不是“度”,而是“弧度”。

 

 效果:

 

 

 

代码如下:

 

 

复制代码

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8" />

 5 <style type="text/css">

 6      canvas {

 7     border-width: 5px;

 8     border-style: dashed;

 9     border-color: rgba(20, 126, 239, 0.50)

10 }

11 </style>

澳门新萄京,12 

13 </head>

14 <body>

15 hello HTML5!

16 <canvas id="c1" width="300" height="300" ></canvas>

17 <script type="text/javascript">

18   var canvas=document.getElementById("c1");

19   var ctx=canvas.getContext("2d");

20   

21   //使用颜色填充矩形

22   ctx.fillStyle="#f00ff0";

23   ctx.fillRect(0,0,300,300);

24   //描绘圆弧

25   //路线最初

26   ctx.beginPath();

27   var startAngle=0;

28   var endAngle=120*Math.PI/180;

29   ctx.arc(100,100,100,startAngle,endAngle,false);

30   

31   //绘制管理

32   ctx.strokeStyle="#ff0000";

33   ctx.lineWidth=3;

34   ctx.stroke();

35 </script>

36 </body>

37 </html>

复制代码

 写完后对arc()方法驾驭多一点了。x,y是圆心的坐标,今后得以虚构得出是怎么画出来的。。。

 

2卡塔尔绘制圆弧的arcTo()方法

 

  arcTo()方法的语法如下:

 

  context.arcTo(x1,y1,x2,y2,半径);

 

  此方法的效果是,从路线的起源和终端分别向坐标(x1,y1)、(x2,y2)绘制直线后,在绘制钦点半径的拱形。

 

  效果:

 

 

 

代码如下:

 

 

复制代码

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8" />

 5 <style type="text/css">

 6      canvas {

 7     border-width: 5px;

 8     border-style: dashed;

 9     border-color: rgba(20, 126, 239, 0.50)

10 }

11 </style>

12 

13 </head>

14 <body>

15 hello HTML5!

16 <canvas id="c1" width="300" height="300" ></canvas>

17 <script type="text/javascript">

18   var canvas=document.getElementById("c1");

19   var ctx=canvas.getContext("2d");

20   

21   //使用颜色填充矩形

22   ctx.fillStyle="#f00ff0";

23   ctx.fillRect(0,0,300,300);

24   //描绘圆弧

25   //路线起初

26   ctx.beginPath();

27   ctx.moveTo(20,20);

28   ctx.arcTo(290,150,100,280,100);

29   ctx.lineTo(20,280);

30   

31   //绘制管理

32   ctx.strokeStyle="#ff0000";

33   ctx.lineWidth=3;

34   ctx.stroke();

35 </script>

36 </body>

37 </html>

复制代码

温馨改了下坐标,效果加深对那么些法子的明亮。。。

 

3)quadraticCurveTo()与bezierCurveTo()方法

 

   ① quadraticCurveTo()方法用于绘制二元抛物线,其语法格式如下。

 

      context.quadraticCurveTo(cpx,cpy,x,y);

 

      绘制由最终钦点的岗位上马至坐标(x,y)的曲线。那时,使用调节点为(cpx,cpy)的二元抛物线实行连接,并将地方(x,y)追加到路线中。

 

   ② bezierCurveTo()方法用于绘制安慕希抛物线,语法格式为:

 

      bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

 

      绘制由最终钦定路径地点至内定地点的曲线。当时,使用调控点分别为(cp1x,cp1y),(cp2x,cp2y)的安慕希抛物线进行连接,并将地方(x,y)追加到路线中,具体暗暗提示图:(qq上对图纸的梳洗好似还非常不够熟知。。。卡塔 尔(阿拉伯语:قطر‎

 

    

 

代码如下:

 

 

复制代码

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8" />

 5 <style type="text/css">

 6      canvas {

 7     border-width: 5px;

 8     border-style: dashed;

 9     border-color: rgba(20, 126, 239, 0.50)

10 }

11 </style>

12 

13 </head>

14 <body>

15 hello HTML5!

16 <canvas id="c1" width="300" height="300" ></canvas>

17 <script type="text/javascript">

18   var canvas=document.getElementById("c1");

19   var ctx=canvas.getContext("2d");

20   

21   //使用颜色填充矩形

22   ctx.fillStyle="#f00ff0";

23   ctx.fillRect(0,0,300,300);

24   //描绘圆弧

25   //路线开头

26   ctx.beginPath();

27   ctx.moveTo(20,20);

28   ctx.bezierCurveTo(100,280,180,280,280,20);

29   

30   

31   //绘制管理

32   ctx.strokeStyle="#ff0000";

33   ctx.lineWidth=3;

34   ctx.stroke();

35 </script>

36 </body>

37 </html>

复制代码

4卡塔 尔(阿拉伯语:قطر‎绘制矩形的rect()方法

 

  语法格式如下:context.rect(x,y,宽度,高度); x,y为矩形左上角坐标

 

  除此而外,Canvas中还提供了二种特定的矩形绘制方法;

 

 ① context.strokeRect(x,y,w,h)    绘制矩形的概貌

 

 ② context.fillRect(x,y,w,h)   填充矩形

 

 ③ context.clearRect(x,y,w,h) 清空矩形

 

 这么些相比好领会就不做效果演示及代码。

 

5.绘制渐变效果

 

    线性渐变与圆圈渐变

 

   线性渐变正是从左至右(或自上而下卡塔 尔(英语:State of Qatar)依次呈现渐渐调换的颜色。而圆形渐变自圆心向外围慢慢呈现变化的颜色。

 

 1卡塔 尔(英语:State of Qatar)线性渐变

 

    钦赐线性渐变时行使createLinearGradient()方法,具体语法如下:

 

   //先成立CanvasGradient对象: CanvasGradient=context.createLinearGradient(x1,y1,x2,y2);  表示由地方(x1,y1)至地点(x2,y2)展现渐变效果

 

   //然后追加渐变颜色:CanvasGradient.addColorStop(颜色开始的相对地点,颜色);   钦命渐变中运用的颜料,第两个参数(初始相对地方卡塔尔中钦定二个数字,进而决定如何地点运用什么颜色。

 

举个栗子:

 

 

 

  代码为:

 

 

复制代码

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8" />

 5 <style type="text/css">

 6      canvas {

 7     border-width: 5px;

 8     border-style: dashed;

 9     border-color: rgba(20, 126, 239, 0.50)

10 }

11 </style>

12 

13 </head>

14 <body>

15 hello HTML5!

16 <canvas id="c1" width="300" height="300" ></canvas>

17 <script type="text/javascript">

18   var canvas=document.getElementById("c1");

19   var ctx=canvas.getContext("2d");

20   

21   //绘图

22   var g=ctx.createLinearGradient(0,0,300,0);

23   g.addColorStop(0,"rgb(255,0,0)"); //初阶地方设置为石榴红

24   g.addColorStop(1,"rgb(255,255,0)"); //黄色

25   ctx.fillStyle=g;

26   ctx.fillRect(20,20,260,260);

27 </script>

28 </body>

29 </html>

复制代码

 2卡塔 尔(英语:State of Qatar)圆形渐变

 

 绘制圆形渐变时,使用createRadialGradient()方法创制对象,同样运用addColorStop()方法追加渐变颜色。具体语法如下

 

  //成立CanvasGradient对象  CanvasGradient=context.createRadialGradient(x1,y1,r1,x2,y2,r2);  通过参数钦点以(x1,y1)为圆心,半径为r1的圆到以(x2,y2)为圆心,半径为r2的圆的渐变效果

 

  // 追加渐变颜色   CanvasGradient.addColorStop(颜色最初的对峙地点,颜色);

 

 举个栗子

 

  

 

 代码为:

 

 

复制代码

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8" />

 5 <style type="text/css">

 6      canvas {

 7     border-width: 5px;

 8     border-style: dashed;

 9     border-color: rgba(20, 126, 239, 0.50)

10 }

11 </style>

12 

13 </head>

14 <body>

15 hello HTML5!

16 <canvas id="c1" width="300" height="300" ></canvas>

17 <script type="text/javascript">

18   var canvas=document.getElementById("c1");

19   var ctx=canvas.getContext("2d");

20   

21   //绘图

22   var g=ctx.createRadialGradient(150,150,50,150,150,100);

23   g.addColorStop(0.3,"red"); //初叶地点设置为桃红

24   g.addColorStop(0.7,"yellow");

25   g.addColorStop(1.0,"blue"); //黄色

26   ctx.fillStyle=g;

27   ctx.fillRect(20,20,260,260);

28 </script>

29 </body>

30 </html>

复制代码

 6.绘制图像

 

Canvas 中的图像绘制

 

 图像绘制的骨干步骤如下:

 

  1卡塔尔国读取图像文件

 

  2卡塔尔国在Canvas中开展绘图

 

 图像读取前,首先创立Image对象,在Image对象的src属性中钦点图像文件所在路径后就能够读取了。读取停止后,触发onload事件,基本语法如下:

 

  var image=new Image();

 

  image.src="图像文件路线";

 

  image.onload=function(){//图像读取时的拍卖}

 

 使用Canvas上下文中的drawImage()方法将读取后的Image对象绘制在Canvas上,实际上是将Image对象中的图像数据输出到Canvas中。有两种drawImage()方法用于图像的绘图

 

  ①直接绘制 context.drawImage(image,dx,dy)

 

  ②尺寸修改(resize) context.drawImage(image,dx,dy,dw,dh)

 

  ③图像截取 context.drawImage()

 

 第①种办法直接将读取的图像绘制在坐标(dx,dy)处。第②种格局依据新的升幅dw与高度dh将图像绘制在坐标(dx,dy)处。第③种方式是将原图像的大器晚成都部队分截抽出后再按钦赐尺寸绘制在Canvas上,从原图像的坐标(sx,sy)发轫截取宽(sw),高(sh)的大器晚成都部队分图像,然后绘制在Canvas上的坐标(dx,dy)处,宽度为dw,中度为dh。

 

像素管理

 

 Canvas与SVG以至Flash稍有两样,绘制的图纸/图像并不能充当靶子操作。相当于说使用stroke()或然fill()方法绘制的图纸,既不能够移动它也不能去除它。假如想操作绘制的图形/图像,使用SVG大概Flash达成比使用Canvas要好。

 

 Canvas中绘制的图纸/图像作为一个完璧归赵的位图保存,因而得以访谈种种像素信息。相当于说,能够选用JavaScript管理Canvas上制图的图像像素音信。那是Canvas的多少个特色

 

1卡塔尔国像素管理的API

 

 imagedata=ctx.getImageData(sx,sy,sw,sh) 重返以(sx,sy)为左上极点,宽为sw,高为sh的矩形图像-imagedata对象。

 

 ctx.putImageData(imagedata,dx,dy) 将imagedata所表示的图像绘制在极点坐标为(dx,dy)处。

 

简述之,使用getImageData()方法抽出Canvas上海体育场面像的像素数量,通过JavaScript加工过那么些像素数量后,使用putImageData方法,重新绘制到Canvas中。

 

 ImageData对象是象征图像像素数量的靶子。此指标定义了三种天性:

 

   ①imagedata.width  图像数据的小幅度

 

   ②imagedata.height 图像数据的可观

 

   ③imagedata.data  图像数码(CanvasPixelArray类型卡塔 尔(英语:State of Qatar)

 

在JavaScript中进行像素数据读取,并进行加工与出口时的具体操作是,从imagedata.data中获取CanvasPixelArray类型的目的。此目的是保存像素消息的一元数组。但是与JavaScript的Array对象不一致,不可对其展开与经常数组同样的操作。

 

举个栗子:(本例中,当客商将桌面上的图像文件拖动到浏览器中后,首先读取图像文件并在浏览器中显得,接着对图像实行是非调换,在原图的边上显示转变后的图像)

 

 客户将桌面上的图像文件拖动到浏览器中的分界面:

 

 

 

 举行是非转换后的功力:

 

 

 

代码如下:

 

 

复制代码

  1 <!DOCTYPE html>

  2 <html>

  3 <head>

  4 <meta charset="utf-8" />

  5 <style type="text/css">

  6 body{

  7     font-family:宋体,Arial,Helvetica,sans-serif;

  8     font-size:80%;

  9     }

 10 #dp{

 11    width:200px;

 12    min-height:70px;

 13    border:1px solid #000000;

 14    background-color:#eeeeee;

 15    padding:len;

 16    margin:2em;

 17     }

 18 #dp img{

 19         margin-right:lem;

 20         }

 21 </style>

 22 <script>

 23 (function(){

 24           

 25           //拖动区域的div成分

 26           var dp=null;

 27           //FileReader接口对象

 28           var reader=null;

 29           

 30           //页面导入时的管理

 31           window.addEventListener("load",function(){

 32                  //获取拖动区域的div成分

 33                  dp=document.getElementById("dp");

 34                  //设置dragover事件的平地风波侦听

 35                  dp.addEventListener("dragover",function(evt){

 36                                                          evt.preventDefault();},false);

 37                  //设置drop事件的平地风波侦听

 38                  dp.addEventListener("drop",function(evt){

 39                                                      evt.preventDefault();

 40                                                      file_droped(evt);},false);

 41                                                   },false);

 42           

 43           //文件被拖入时的管理

 44           function file_droped(evt)

 45           {

 46             //清空显示区域

 47             while(dp.firstChild)

 48             {

 49                 dp.removeChild(dp.firstChild);

 50             }

 51             //拖动文件的File接口对象

 52             var file=evt.dataTransfer.files[0];

 53             //FileReader接口对象

 54             reader=new FileReader();

 55             //非图像文件画像时报错

 56             if(!/^image/.test(file.type)){alert("请拖入图像文件");}

 57             //导入拖入图像

 58             reader.readAsDataURL(file);

 59             reader.onload=prepare_image;

 60           }

 61             

 62          //显示拖入图像文件

 63          function prepare_image(evt)

 64          {

 65              //创造img成分,呈现拖入的图像

 66              var image=document.createElement("img");

 67              image.setAttribute("src",reader.result);

 68              dp.appendChild(image);

 69              //img成分中导入图像文书档案后开展继续管理

 70              image.onload=function(){

 71                  //获取图像的尺码

 72                  var w=parseInt(image.width);

 73                  var h=parseInt(image.height);

 74                  //创设canvas对象,导入图像

 75                  var canvas=document.createElement("canvas");

 76                  canvas.width=w;

 77                  canvas.height=h;

 78                  var ctx=canvas.getContext("2d");

 79                  ctx.drawImage(image,0,0);

 80                  //获得canvas像素数据

 81                  var imagedata=ctx.getImageData(0,0,w,h);

 82                  

 83                  //进行是非调换

 84                  convert_image_to_gray_scale(imagedata.data);

 85                  

 86                  //替换canvas中的像素数量

 87                  ctx.putImageData(imagedata,0,0);

 88                  

 89                  //显示canvas

 90                  dp.appendChild(canvas);

 91                  }

 92          }

 93          

 94          //黑白转换函数

 95          function convert_image_to_gray_scale(data)

 96          {

 97              var len=data.length;

 98              var pixels=len/4;

 99              for(var i=0;i<pixels;i ){

100                  //取出R,G,B值

101                  var r=data[i*4];

102                  var g=data[i*4 1];

103                  var b=data[i*4 2];

104                  

105                  //举办是非转变

106                  var t=parseInt((11*r 16*g 5*b)/32);

107                  //将调换后的像素数量设置到原本数组成分中

108                  data[i*4]=t;

109                  data[i*4 1]=t;

110                  data[i*4 2]=t;

111                  }

112          }

113                  

114     })();

115 </script>

116 

117 </head>

118 <body>

119 <div id="dp">

120 <p>将桌面图像文件拖动到这里。</p>

121 </div>

122 </body>

123 </html>

看的是HTML5平移支付即学即用那本书,首先学习Canvas底子,废话相当少说,间接看率先个例证。 代码如下: 1 !DOCTYPE html 2...

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京:方法裁剪区域图像,利用HTML5中的

上一篇:JS预览图像将本地图片显示到浏览器上,HTML5振动 下一篇:没有了
猜你喜欢
热门排行
精彩图文