【皇家赌场手机版】Canvas鼠标与键盘事件,Canvas鼠标与键盘事件demo示例

点评:本文的首要母的是言传身教HTML5
Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件经过键盘调控Canvas上对象活动,感兴趣的意中人能够参考下哈,希望对大家持有协助

亲自去做HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件
透过键盘调整Canvas上对象活动。

演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件
经过键盘调控Canvas上对象活动。

1.第一个Canvas程序 

演示HTML5
Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件经过键盘调整Canvas上对象活动。

Canvas对象扶助具备的JavaScript的鼠标事件,包涵鼠标点击(MouseClick),
鼠标按下

Canvas对象帮衬具备的JavaScript的鼠标事件,包罗鼠标点击(MouseClick),
鼠标按下

 

Canvas对象辅助具有的JavaScript的鼠标事件,包涵鼠标点击(MouseClick),
鼠标按下(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse
Move)对Canvas加多鼠标事件措施有二种,一种艺术是透过API来完毕:

(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move)

(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move)

看的是HTML5运动支付即学即用这本书,首先学习Canvas基础,废话相当少说,间接看率先个例子。

代码如下:

对Canvas增加鼠标事件措施有二种,一种方法是通过API来变成:

对Canvas增加鼠标事件措施有三种,一种方法是通过API来实现:

 

// mouse event
canvas.addEventListener(“mousedown”,doMouseDown,false);
canvas.addEventListener(‘mousemove’, doMouseMove,false);
canvas.addEventListener(‘mouseup’, doMouseUp, false);
除此以外一种格局在JavaScript中称之为反方式:

// mouse event

// mouse event

 

代码如下:

canvas.addEventListener(“mousedown”,doMouseDown,false);

canvas.addEventListener(“mousedown”,doMouseDown,false);

 

canvas.onmousedown = function(e){
}
canvas.onmouseup = function(e){
}
canvas.onmousemove = function(e){
}

canvas.addEventListener(‘mousemove’, doMouseMove,false);

canvas.addEventListener(‘mousemove’, doMouseMove,false);

 

获得鼠标在Canvas对象上坐标:
出于Canvas上鼠标事件中无法直接拿走鼠标在Canvas的坐标,所猎取的都以依照整个
显示器的坐标。所以经过鼠标事件e.pageX与e.pageY来博取鼠标地点,然后通过
Canvas.
getBoundingClientRect()来获得Canvas对象相对荧屏的争辨地点,通过测算

canvas.addEventListener(‘mouseup’,  doMouseUp, false);

canvas.addEventListener(‘mouseup’,  doMouseUp, false);

代码如下:

收获鼠标在Canvas的坐标,代码如下:

除此以外一种艺术在JavaScript中称之为反情势:

除此以外一种办法在JavaScript中称之为反情势:

 

代码如下:

canvas.onmousedown = function(e){

canvas.onmousedown = function(e){

 

function getPointOnCanvas(canvas, x, y) {
var bbox =canvas.getBoundingClientRect();
return { x: x- bbox.left *(canvas.width / bbox.width),
y:y – bbox.top * (canvas.height / bbox.height)
};
}

   

   

 1 <!DOCTYPE html>

键盘事件:
HTML5
Canvas本身不辅助键盘事件监听与收获,常用的有二种办法来解决那么些标题:

}

}

 2 <html>

一:通过windows对象来促成Canvas键盘事件监听与管理
// key event – use window as object
window.addEventListener(‘keydown’, doKeyDown,true);

canvas.onmouseup = function(e){

canvas.onmouseup = function(e){

 3 <head>

二:通过在Canvas对象上增加任何扶助键盘事件的DOM成分完毕键盘事件匡助

   

   

 4 <meta charset=”utf-8″ />

代码如下:

}

}

 5 <style type=”text/css”>

<canvas id=”event_canvas”tabindex=”0″></canvas>
// key event – use DOM element asobject
canvas.addEventListener(‘keydown’, doKeyDown,true);
canvas.focus();

canvas.onmousemove = function(e){

canvas.onmousemove = function(e){

 6      canvas {

里面tabindex为HTML5 DOM成分,协助键盘事件。
亲自去做,一个能够依照键盘上下左右运动的矩形块:
皇家赌场手机版 1 
二个一体化的鼠标与键盘事件演示代码如下:

   

   

 7     border-width: 5px;

代码如下:

}

}

 8     border-style: dashed;

var tempContext = null; // global variable 2d context
var started = false;
var mText_canvas = null;
var x = 0, y =0;
window.add
window.onload = function() {
var canvas = document.getElementById(“event_canvas”);
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log(“Canvas not supported. Please install a HTML5 compatible
browser.”);
return;
}
// get 2D context of canvas and draw rectangel
tempContext = canvas.getContext(“2d”);
tempContext.fillStyle=”blue”;
x = canvas.width/2;
y = canvas.height/2;
tempContext.fillRect(x, y, 80, 40);
// key event – use DOM element as object
canvas.addEventListener(‘keydown’, doKeyDown, true);
canvas.focus();
// key event – use window as object
window.addEventListener(‘keydown’, doKeyDown, true);
// mouse event
canvas.addEventListener(“mousedown”, doMouseDown, false);
canvas.addEventListener(‘mousemove’, doMouseMove, false);
canvas.addEventListener(‘mouseup’, doMouseUp, false);
}
function getPointOnCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x – bbox.left * (canvas.width / bbox.width),
y: y – bbox.top * (canvas.height / bbox.height)
};
}
function doKeyDown(e) {
var keyID = e.keyCode ? e.keyCode :e.which;
if(keyID === 38 || keyID === 87) { // up arrow and W
clearCanvas();
y = y – 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 39 || keyID === 68) { // right arrow and D
clearCanvas();
x = x + 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 40 || keyID === 83) { // down arrow and S
clearCanvas();
y = y + 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 37 || keyID === 65) { // left arrow and A
clearCanvas();
x = x – 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
}
function clearCanvas() {
tempContext.clearRect(0, 0, 500, 500)
}
function doMouseDown(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
console.log(“mouse down at point( x:” + loc.x + “, y:” + loc.y + “)”);
tempContext.beginPath();
tempContext.moveTo(loc.x, loc.y);
started = true;
}
function doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
if (started) {
tempContext.lineTo(loc.x, loc.y);
tempContext.stroke();
}
}
【皇家赌场手机版】Canvas鼠标与键盘事件,Canvas鼠标与键盘事件demo示例。function doMouseUp(event) {
console.log(“mouse up now”);
if (started) {
doMouseMove(event);
started = false;
}
}

获得鼠标在Canvas对象上坐标:

得到鼠标在Canvas对象上坐标:

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

HTML部分:

鉴于Canvas上鼠标事件中不可能向来获取鼠标在Canvas的坐标,所取得的都以依附整个

出于Canvas上鼠标事件中无法间接获取鼠标在Canvas的坐标,所猎取的都是基于整个

10 }

代码如下:

显示屏的坐标。所以通过鼠标事件e.pageX与e.pageY来赢得鼠标地点,然后经过

显示屏的坐标。所以通过鼠标事件e.pageX与e.pageY来获得鼠标地方,然后经过

11 </style>

<body>
<h1>HTML Canvas Event Demo – By Gloomy Fish</h1>
<pre>Press W, A, S, D keys to move</pre>
<div id=”my_painter”>
<canvas id=”event_canvas” tabindex=”0″></canvas>
</div>
</body>

Canvas.
getBoundingClientRect()来赢得Canvas对象相对屏幕的相对位置,通过总括

Canvas.
getBoundingClientRect()来获得Canvas对象相对显示器的相持地方,通过计算

12 

取得鼠标在Canvas的坐标,代码如下:

获得鼠标在Canvas的坐标,代码如下:

13 </head>

function getPointOnCanvas(canvas, x, y) {

function getPointOnCanvas(canvas, x, y) {

14 <body>

    var bbox =canvas.getBoundingClientRect();

    var bbox =canvas.getBoundingClientRect();

15 hello HTML5!

    return【皇家赌场手机版】Canvas鼠标与键盘事件,Canvas鼠标与键盘事件demo示例。 { x: x- bbox.left *(canvas.width / bbox.width),

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

16 <canvas id=”c1″ width=”300″ height=”300″ ></canvas>

            y:y – bbox.top  * (canvas.height / bbox.height)

            y:y – bbox.top  * (canvas.height / bbox.height)

17 </body>

            };

            };

18 <script type=”text/javascript”>

}

}

19   //canvas对象的拿走

键盘事件:

 

20   var canvas=document.getElementById(“c1”);

HTML5
Canvas本人不帮忙键盘事件监听与收获,常用的有三种办法来减轻这几个难点:

Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件
通过键盘调控Canvas上对象活动。
Canvas对象匡助具备的JavaScript的鼠标事…

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

一:通过Windows对象来贯彻Canvas键盘事件监听与管理
// key event – use window as object

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

window.addEventListener(‘keydown’, doKeyDown,true);

23   //绘图管理

二:通过在Canvas对象上增添其他支持键盘事件的DOM成分达成键盘事件支持

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

<canvas id=“event_canvas”tabindex=“0”></canvas>

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

// key event – use DOM element asobject

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

canvas.addEventListener(‘keydown’, doKeyDown,true);

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

canvas.focus(); 

28   <!–alert(“hello”);–>

其中tabindex为HTML5 DOM元素,匡助键盘事件。

29 </script>

亲自过问,三个能够依靠键盘上下左右运动的矩形块:

30 </html>

皇家赌场手机版 2

复制代码

一个全部的鼠标与键盘事件演示代码如下:

知识点:

 

 

  var tempContext = null; // global variable 2d context    var started = false;    var mText_canvas = null;    var x = 0, y =0;    window.add    window.onload = function() {     var canvas = document.getElementById("event_canvas");     console.log(canvas.parentNode.clientWidth);     canvas.width = canvas.parentNode.clientWidth;     canvas.height = canvas.parentNode.clientHeight;          if (!canvas.getContext) {         console.log("Canvas not supported. Please install a HTML5 compatible browser.");         return;     }          // get 2D context of canvas and draw rectangel     tempContext = canvas.getContext("2d");     tempContext.fill ;     x = canvas.width/2;     y = canvas.height/2;     tempContext.fillRect(x, y, 80, 40);              // key event - use DOM element as object           canvas.addEventListener('keydown', doKeyDown, true);           canvas.focus();             // key event - use window as object           window.addEventListener('keydown', doKeyDown, true);                      // mouse event           canvas.addEventListener("mousedown", doMouseDown, false);           canvas.addEventListener('mousemove', doMouseMove, false);           canvas.addEventListener('mouseup',   doMouseUp, false);    }        function getPointOnCanvas(canvas, x, y) {     var bbox = canvas.getBoundingClientRect();     return { x: x - bbox.left * (canvas.width  / bbox.width),       y: y - bbox.top  * (canvas.height / bbox.height)       };    }        function doKeyDown(e) {     var keyID = e.keyCode ? e.keyCode :e.which;     if(keyID === 38 || keyID === 87)  { // up arrow and W      clearCanvas();      y = y - 10;      tempContext.fillRect(x, y, 80, 40);      e.preventDefault();     }     if(keyID === 39 || keyID === 68)  { // right arrow and D      clearCanvas();      x = x + 10;      tempContext.fillRect(x, y, 80, 40);      e.preventDefault();     }     if(keyID === 40 || keyID === 83)  { // down arrow and S      clearCanvas();      y = y + 10;      tempContext.fillRect(x, y, 80, 40);      e.preventDefault();     }     if(keyID === 37 || keyID === 65)  { // left arrow and A      clearCanvas();      x = x - 10;      tempContext.fillRect(x, y, 80, 40);      e.preventDefault();     }    }        function clearCanvas() {     tempContext.clearRect(0, 0, 500, 500)    }        function doMouseDown(event) {     var x = event.pageX;     var y = event.pageY;     var canvas = event.target;     var loc = getPointOnCanvas(canvas, x, y);     console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");     tempContext.beginPath();     tempContext.moveTo(loc.x, loc.y);     started = true;    }        function doMouseMove(event) {     var x = event.pageX;     var y = event.pageY;     var canvas = event.target;     var loc = getPointOnCanvas(canvas, x, y);     if (started) {      tempContext.lineTo(loc.x, loc.y);      tempContext.stroke();     }    }        function doMouseUp(event) {     console.log("mouse up now");        if (started) {         doMouseMove(event);            started = false;     }    }

Canvas 的主旨用法

HTML部分:

 

 

 1)取得Canvas对象

 

 

<body>   <h1>HTML Canvas Event Demo - By Gloomy Fish</h1>   <pre>Press W, A, S, D keys to move</pre>   <div id="my_painter">    <canvas id="event_canvas" tabindex="0"></canvas>   </div>  </body>

 2)从Canvas对象中收获绘图用的上下文

以为不错请辅助部分,感谢!!

 


 3)使用上下文中的方法与天性实行绘图

 

 颜色的钦赐方法

 

  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)

 

  4) lineTo() 绘制此前一次绘图地点到(x,y)的直线

 

 绘制路线时利用的法子:

 

 1)stroke() 绘制路线

 

 2)fill()填充路线

 

 钦命绘图样式时接纳的天性

 

 1)fillStyle 内定填充时使用的颜色与体制

 

 2)strokeStyle 内定路径的线颜色与体制

 

 3)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.制图渐变效果

 

    线性渐变与圆圈渐变

 

 
 线性渐变正是从左至右(或自上而下)依次显示慢慢成形的水彩。而圆形渐变自圆心向外面逐步突显变化的颜料。

 

 1)线性渐变

 

    钦点线性渐变时行使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)圆形渐变

 

 绘制圆形渐变时,使用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类型)

 

在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             //File里德r接口对象

 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…

Leave a Comment.