使用HTML5 canvas完成的一個網頁白板

時間 2019-11-13

標籤使用 html5 html canvas 完成一個網頁白板欄目 HTML5 简体版

原文原文鏈接

該代碼可以使用canvas對象完成的一個基本功能。僅供你們參考。javascript

<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>
html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。