使用HTML5 canvas完成的一个网页白板

最新推荐文章于 2021-06-14 13:24:34 发布

陈刚12

最新推荐文章于 2021-06-14 13:24:34 发布

阅读量2k

点赞数 1

该代码能够使用canvas对象完成的一个基本功能。仅供大家参考。

<html>   
   
<head>   
<meta http-equiv="Content-Type" contentType="text/html; charset=UTF-8" %>   
<title>Title</title>   
<script type="text/javascript">   
var ball;    
var mouseX = 100;    
var mouseY = 100;    
var angle = 0;    
var radius = 0;    
   
var ballstyle = "."   
var ballcolor = "#FF0000";    
var allzindex = 0;    
   
var cav_elem;    
var cav_context;    
   
//old positon    
var opos;    
   
function draw(){    
        ball = document.createElement("p");    
        ball.style.position = "absolute";    
        ball.style.color = ballcolor;    
        ball.style.zIndex = allzindex+1;    
        ball.innerHTML = ballstyle;    
        document.body.appendChild(ball);    
        document.all.selected = false;    
        
    ball.style["left"] = mouseX+ "px";    
    ball.style["top"] = mouseY+ "px";    
}    
function draw_cav(npos){    
        
   
         
    if(opos){    
        cav_context.beginPath();    
        // Start from the top-left point.    
        
        cav_context.moveTo(opos.x,opos.y);     
        cav_context.lineTo(npos.x,npos.y);    
        
        cav_context.stroke();    
        cav_context.closePath();    
            
    }    
   
}    
   
function MousePos(e){    
    eee = e || window.event;    
    var x,y;    
    if(!document.all){    
        x = e.pageX;    
        y = e.pageY;    
    }    
    else{    
        x = event.clientX + document.documentElement.scrollLeft;    
        y = event.clientY + document.documentElement.scrollTop;    
    }    
    return {x:x,y:y};    
}    
function setXY(e){    
    eee = e || window.event;    
    var pos = MousePos(e);    
    mouseX = pos.x;    
    mouseY = pos.y;    
    //if(e.button == 1){    
        draw_cav(pos);    
    //}    
    opos = pos;    
}    
window.onload = function(){    
        
        //get canvas and context    
            var elem = document.getElementById('myCanvas');    
            if (elem && elem.getContext) {    
                cav_elem = elem;    
              var context = elem.getContext('2d');    
              if (context) {    
                cav_context = context;    
                //cav_context.fillRect(0, 0, cav_elem.width, cav_elem.height);    
              }    
            }    
                
        //add mouse action    
    document.documentElement.onmousemove = function(e){    
        eee = e || window.event;    
        setXY(e);    
    };    
}    
</script>   
</head>   
<body onselectstart = "return false;">   
    <canvas id="myCanvas" border="1" width="1000" height="400">   
     Fallback content, in case the browser does not support Canvas.    
  </canvas>   
</body>   
</html>