首页vns威尼斯城官网登入 › 21   //vns威尼斯城官网登入取得绘图用的上下文对象,获取尺寸

21   //vns威尼斯城官网登入取得绘图用的上下文对象,获取尺寸

摘自 txdb的专栏

// drawrect()

36 </html>

    function setEgg() {
        drawPoint(eX, eY, '#f70');
    }
    
    Aissa.Game = {};

   if( s === 1 ){
       core.move(1);
   }else if( y === 1 ){
                            core.move(1);
   }else{
       core.move(0);
   }
   console.log(s, y)
  }
 };

 

var c = document.getElementById("myCanvas");

27   //canvas对象的取得

            ctx.clearRect(0, 0, cv.width, cv.height);

 core.init(0);

这里给出了跟踪飞机的子弹完整版。子弹会一直跟踪直到打到飞机。打到后会提示坚持了几秒。
有个小bug,打到后是先出提示再变红的,可以改下,变成先变红,再提示。
另外可以改成子弹飞行10s后自动消失(重头再来)
还可以改成子弹的速度每秒+1;
 
<!DOCTYPE html>
<html>
<head>
    <title>聪明的子弹完整版</title>
    <script type="text/javascript"
src="jquery-1.6.1.js"></script>
  <script type="text/javascript">
      var x = 225;
      var y=450;
      var mousex, mousey;
      var canvas;
      var ctx;
      var c=0;
      var zidan=new Object();
      $(document).ready(function () {
           canvas = $(document).get(0).getElementById("MyCanvas");
         
          if (canvas.getContext) {
              ctx = canvas.getContext("2d");
              zidan.x = 245;
              zidan.y = 10;
              zidan.jiaodu = Math.PI * 0.5;
              zidan.sudu = 10;
              zidan.dadao = 0;//0代表没打到,1代表打到
              animate();
              }
      });
      zidan.move = function () {
          if(y - zidan.y>0)
          {
          zidan.y = zidan.y + Math.abs(zidan.sudu *
Math.cos(zidan.jiaodu));
          }
          else
          {
            zidan.y = zidan.y - Math.abs(zidan.sudu *
Math.cos(zidan.jiaodu));
           }
          if(x - zidan.x>0)
          {
          zidan.x = zidan.x + Math.abs(zidan.sudu *
Math.sin(zidan.jiaodu));
           }
           else
           {
            zidan.x = zidan.x - Math.abs(zidan.sudu *
Math.sin(zidan.jiaodu));
           }
          
         
          //超出下边界 www.2cto.com
          if (zidan.y > 500)
              zidan.y = 10;
         //请添加超出上左右边界的判断
          //if (zidan.y == 10)
              zidan.jiaodu = Math.atan((x - zidan.x) / (y - zidan.y));
      };
      function animate()
      {
       
          ctx.clearRect(0, 0, 500, 500);
          //由键盘控制的方块
          if (zidan.dadao == 1)
              ctx.fillStyle = "red";
          ctx.fillRect(x, y, 50, 50);
          ctx.fillStyle = "black";
          ctx.beginPath();
          ctx.arc(zidan.x, zidan.y, 10, 0, Math.PI * 2, false);
          ctx.closePath();
          ctx.fill();
          if(zidan.dadao==0)
          setTimeout(animate, 100);
          //动画的逻辑,子弹直线运动,超出范围,则重新设置为10
          zidan.move();
          //碰撞检测,如果打到,则方块变成红色,游戏停止
         
if((zidan.y>y)&&(zidan.y<y+50)&&(zidan.x>x)&&(zidan.x<x+50))
          {
              zidan.dadao = 1;
              alert(c/10);
          }
          c=c+1;
         
      };
</script>
</head>
<body  >
      <div>
        <canvas id="MyCanvas" width="500" height="500" >
</canvas>
      </div>
  
  </body>
     <script type="text/javascript">
        
        
//注意这里是document,canvas应该也能捕获keydown事件,留以后试吧
         $(document).keydown(function (e) {
             var k = e.keyCode;
             //如果不知道按键的代码,用alert输出看
             //alert(k);
             if (k == 37)
                 x = x - 10;
             if (k == 39)
                 x = x + 10;
             if (k == 38)
                 y = y - 10;
             if (k == 40)
                 y = y + 10;
          
     });
    </script>
</html>

ctx.fillStyle = this.color[~~(Math.random() * 4)];

17 <script type="text/javascript">

    function changeEggXY(w, h) {
        var count = 0;

 var core = {
  init: function(i){
   core.bg();
   core.proint(i);
   core.btn();
  },

有个小bug,打到后是先出提示再变红的,可...

for (var y = 0; y < imgData.height; y += 4) {

 

            for (i = 0, len = point.length; i < len; i++) {
                drawPoint(point[i][0], point[i][1], '#fff');
            }

 

// ctx.clearRect(0,0,c.width,c.height);

 效果:

<!Doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" ";

  • 一个简单的html5 canvas时钟例子

winWidth = document.body.clientWidth;

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

            point.reverse();
            point.push(newXY);
            point.reverse();
            point.length = mx;

  /*开始加速*/
  start: function(){
   i          = (i === 12) ? 0 : i;
   speed     = (speed !== 100) ? (speed - 20) : 100;
   startTimer = setTimeout(function(){
                                        core.start();
                                     }, speed);

if (window.innerWidth)

     
arc()方法的语法如下:context.arc(x,y,半径,开始角度,结束角度,是否逆时针旋转);

自己写的贪吃蛇小游戏用canvas做的,没有引用excanvas.js所以不支持ie ~
还有同时按多个方向键会有bug, 喜欢的复值 code拿去玩吧~

复制代码

ctx.fillStyle = 'red'

 效果:

            sil = setInterval(t.loop, 100);
        },
        loop: function () {
            var t = this, newXY = [], x = point[0][0], y = point[0][1], i, len;

  callback: function(i){
   console.log(i,'中奖了')
  },

getpoint('WWW.JUSUKEJI.COM');

 70              image.onload=function(){

            t.changeDirection();

    core.clear();
    core.init(i);
    i++;
   }else{
    if( shopTimer ) clearTimeout(shopTimer);
    core.callback(i);
    i = 0;
    isClick = true;
   }
  },

findDimensions()

  2)在Canvas中进行绘制

<html xmlns="" lang="gb2312">
<head>
<title> - S n a k e - </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="Aissa" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
    body{background-color:#000; text-align:center;}
    canvas{margin:100px; border:solid 1px #ccc;}
</style>
</head>
<body>
    <input id="btn" type="button" value="start!!" />
    <canvas id="cvSnake" width="400" height="300"></canvas>
</body>
<script type="text/javascript">
    var Aissa = {}, cv, ctx, point = [[31, 1], [21, 1], [11, 1], [1, 1]], mx = 4, direction = 2, eX = 0, eY = 0, sil;

  /*匀速运动,指定指针*/
  move: function(h){
   var val  = 12 - Math.abs(h + 1 - i);

}

 14    background-color:#eeeeee;

            /* eat */
            if (point[0][0] == eX && point[0][1] == eY) {
                mx += 1;
                changeEggXY(cv.width, cv.height);
            }

  btn: function(){
   ctx.beginPath();
   ctx.fillStyle = '#555';
   ctx.arc(x, y, 50, 0, Math.PI*2);
   ctx.fill();
   ctx.closePath();
   ctx.restore();
  },www.111cn.net

for (var i = 0; i < 500; i++) {

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

            switch (direction) {
                case 1:
                    newXY = [x, y -= 10];
                    break;
                case 2:
                    newXY = [x += 10, y];
                    break;
                case 3:
                    newXY = [x, y += 10];
                    break;
                case 4:
                    newXY = [x -= 10, y];
                    break;
            }

 canvas.width  = width;
 canvas.height = height;

function getpoint(txt) {

119 <div id="dp">


 代码如下

<!DOCTYPE html>

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

算法上也可以用 正则 判断数组是否有重复,不一定要用循环,性能上会更好
:)

})();
</script>
</html>

}

34   ctx.stroke();

 vns威尼斯城官网登入 1代码

   ctx.save();
   for(; i < len; i++){
    ctx.beginPath();
    ctx.fillStyle = color[i];
    ctx.moveTo(x, y);
    ctx.arc(x, y, 180, deg * i * 30,  deg * (i+1) * 30);
    ctx.fill();
    ctx.closePath();
   }
   ctx.restore();
  },

}

代码如下:

    Aissa.Game.Snake = function (cvId) {
        this.init(cvId);
    }

    core.clear();
    core.init(i);
    i++;
   }else{
    core.stop();
   }
  },

}

 

        do {
            count = 0;
            eX = Math.floor(Math.random() * ((w - 10) / 10)) * 10 + 1;
            eY = Math.floor(Math.random() * ((h - 10) / 10)) * 10 + 1;

  /*抽奖,概率算法*/
  lottery: function(){
   var s = core.random(1, 10),
       y = core.random(1, 1000);

ctx.beginPath();

 

            setEgg();
        },
        changeDirection: function () {
            var t = this;
            window.onkeydown = function (e) {
                // left: 37 4  up: 38 1  right: 39 2  down: 40 3
                switch (e.keyCode) {
                    case 38:
                        if (direction == 3) return;
                        direction = 1;
                        break;
                    case 39:
                        if (direction == 4) return;
                        direction = 2;
                        break;
                    case 40:
                        if (direction == 1) return;
                        direction = 3;
                        break;
                    case 37:
                        if (direction == 2) return;
                        direction = 4;
                        break;
                    default:
                        return;
                }
            }
        }
    }
    document.getElementById('btn').onclick=function(){
        new Aissa.Game.Snake('cvSnake');
        document.getElementById('btn').disabled = true;
    }
</script>
</html>

 canvas.onclick = function(e){
  if( isClick ){
   core.start();
   setTimeout(function(){
       core.lottery();
       }, 5000);
  }
  //else if( !isClick && speed === 100 ){
  //}
 }

function drawrect() {

 

            /* set snake */
            for (var i = 0, len = point.length; i < len; i++) {
                drawPoint(point[i][0], point[i][1], '#fff');
            }

   core.clear();
   core.init(i);
   i++;
   isClick = false;
  },

</script>

代码如下:

    Aissa.Game.Snake.prototype = {
        init: function (cvId) {
            var t = this;
            cv = document.getElementById(cvId);
            if (!cv) return;
            ctx = cv.getContext('2d');

其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也可以替换上图,嘿嘿,给大家做个事例,如有bug,请以评论的形式提出。

var ctx = c.getContext("2d");

12 

    function drawPoint(x, y, c) {
        ctx.fillStyle = c;
        ctx.fillRect(x, y, 9, 9);
    }

年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走。

function findDimensions() //函数:获取尺寸

  1 <!DOCTYPE html>

            /* set egg xy */
            changeEggXY(cv.width, cv.height);

 var canvas     = document.getElementById('canvas'),
            ctx        = canvas.getContext('2d'),
            width      = 400,
            height     = 400,
            x          = 200,
            y          = 200,
            color      =
['#a00','#0a0','#00a','#aa0','#a16','#0aa','#a5a','#f31','#784','#a43','#34a','#786'],
            deg        = Math.PI / 180,
            isClick    = true,
            startTimer = null,
            shopTimer  = null,
            i          = 0,
            len        = 12
            speed      = 340;

}

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

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5圆形抽奖 - zkeyword.com</title>
</head>
<body>
<canvas id="canvas" ></canvas>
</body>
<script>
var lottery = (function(){

//获取窗口高度

10 }

            for (var i = 0, len = point.length; i < len; i++) {
                if (point[i][0] == eX && point[i][1] == eY) {
                    count = 1;
                    break;
                }
            }
        } while (count == 1)
    }


var imgData = ctx.getImageData(0, 0, c.width -
ctx.measureText(txt).width / 2, c.height);

26   ctx.fillStyle=g;

            /* die */
            var count = 0;
            for (i = 1; i < len; i++) {
                if (point[0][0] == point[i][0] && point[0][1] == point[i][1]) {
                    count = 1;
                    //break;
                }
            }
            if (count == 1 || point[0][0] < 0 || point[0][0] > cv.width || point[0][1] < 0 || point[0][1] > cv.height) {
                alert('die');
                location.reload();
            }

  random: function(min, max){
   return Math.floor(min + Math.random()*(max-min));
  },

ctx.clearRect(0, 0, c.width, c.height);

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

  bg: function(){
   var i = 0;

}

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

   if( startTimer ) clearTimeout(startTimer);
   if( val !== 12 ){
    i = (i === 12) ? 0 : i;
    var timer = setTimeout(function(){
                                                core.move(h);
                                     }, speed);

<body>

 

  /*停止减速*/
  stop: function(){
   if( speed !== 340 ){
    i = (i === 12) ? 0 : i;
    speed += 20;
    shopTimer = setTimeout(function(){
                                                core.stop();
         }, speed);

console.log(this.x - this.w, this.y - this.h, this.w, this.h)

 这个比较好理解就不做效果演示及代码。

  proint: function(i){
   ctx.save();
   ctx.beginPath();
   ctx.fillStyle = '#333';
   ctx.moveTo(x, y);
   ctx.arc(x, y, 180, deg * i * 30,  deg * (i+1) * 30);
   ctx.fill();
   ctx.closePath();
   ctx.restore();
  },

{

 91                  }

  clear: function(){
   ctx.clearRect(0, 0, 250, 250);
  },

}

14 </head>

你可能感兴趣的文章

</style>

26   ctx.beginPath();

var winWidth = 0;

37 </html>

ctx.fillRect(x - 2, y - 2, 2, 2);

   ①imagedata.width  图像数据的宽度

winHeight = document.documentElement.clientHeight;

107                  //将变换后的像素数据设置到原来数组元素中

winWidth = document.documentElement.clientWidth;

2.路径

for (var x = 0; x < imgData.width; x += 4) {

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

else if ((document.body) && (document.body.clientHeight))

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

</body>

 

<html>

13 </head>

ctx.fillRect(this.x - this.w, this.y - this.h, this.w, this.h);

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

}

 

this.h = ~~(Math.random() * 2 + 2);

 

button {

 

winHeight = document.body.clientHeight;

 

height: 100%;

 7     border-width: 5px;

}

 

c.height = winHeight;

  1) beginPath() 重置路径的开始

c.width = winWidth;

15 hello HTML5!

ctx.fillText(txt, c.width / 2 - ctx.measureText(txt).width / 2, c.height
/ 2);

 

winWidth = window.innerWidth;

104                  

body {

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

ctx.beginPath();

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

</head>

 代码如下:

ctx.fill()

13 <script> 

function createRect(gx, gy) { //设置小方块对象的属性,然后生成小方块

 6 <style type="text/css">

this.color = ['#ffff33', '#ff00cc', '#00ffff', '#9933ff'];

 19         margin-right:lem;

createRect.prototype = {

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

this.v = Math.random() * 4 - 2;

20   

this.y = c.height * Math.random();

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

this.gy = gy;

举个栗子:

position: absolute;

17 <script type="text/javascript">

//–>

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

rect.draw()

 

this.gx = gx;

 3 <head>

winHeight = window.innerHeight;

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

ctx.font = "100px blod";

3)quadraticCurveTo()与bezierCurveTo()方法

html,

 

<script>

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

},

 

您的浏览器不支持 HTML5 canvas 标签。

 绘制路径时使用的方法:

var i = (imgData.width * y + x) * 4;

 

<meta charset="utf-8">

11 </style>

if (document.documentElement && document.documentElement.clientHeight &&
document.documentElement.clientWidth) {

11 </style>

move: function () {

 

ctx.fillStyle = "black";

 95          function convert_image_to_gray_scale(data)

ctx.fill()

20 <script type="text/javascript">

top: 0;

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

}

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

var rect = new createRect()

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

}

 6      canvas {

width: 100%;

12 </style>

</html>

 15    padding:len;

// ctx.putImageData(imgData,10,70);

 

<head>

知识点:

</canvas>

17 </body>

draw: function () {

 

// console.log(x,y)

22   ctx.fillStyle="#f00ff0";

left: 0;

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

// ctx.closePath()

 8     border-style: dashed;

}

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

}

 34                  //设置dragover事件的事件侦听

//通过深入Document内部对body进行检测,获取窗口大小

46 </body>

console.log()

 22 <script>

window.onresize = findDimensions;

 

getpoint('WWW.JUSUKEJI.COM');

 1 <!DOCTYPE html>

<canvas id="myCanvas" style="background:black; ">

30   

drawrect()

 

//获取窗口宽度

14 <body>

// setInterval(drawrect,30)

 69              //img元素中导入图像文档后进行后续处理

var winHeight = 0;

 84                  convert_image_to_gray_scale(imagedata.data);

margin: 0;

 57             //导入拖入图像

if (imgData.data[i + 3] > 0) {

19 

if (window.innerHeight)

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

<title>粒子字体效果</title>

 1)fillStyle 指定填充时使用的颜色与样式

else if ((document.body) && (document.body.clientWidth))

31   //绘制处理

this.x = c.width * Math.random();

  2) closePath() 关闭到现在为止的路径

this.w = ~~(Math.random() * 2 + 2);

37                ctx.fill();

<style>

14 <body>

// drawrect(10,20)

14 (function(){

//调用函数,获取数值

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

 

19   //canvas对象的取得

 

 46             //清空显示区域

 

代码如下:

32                

33   ctx.lineWidth=3;

28 </script>

复制代码

 8     border-width: 5px;

25   //路径开始

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

自己改了下坐标,效果加深对这个方法的理解。。。

 2 <html>

 13    border:1px solid #000000;

 

41 </script>

 

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

 

  4) lineTo() 绘制从前一次绘图位置到(x,y)的直线

24                

 

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

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

25                //圆2

21   //绘图

 

36       var y=event.pageY;

 

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

20   

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

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

复制代码

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

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

31   //绘制处理

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=1311

上一篇:

下一篇:

相关文章