首页 > 代码库 > canvas初体验

canvas初体验

2024-09-09 02:05:18   217人阅读

利用画布，绘制随机大小，颜色，位置 方框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5-canvas</title>
    <style type="text/css">
        canvas{background: #f1aaa3; margin: 80px auto; display: block;}
    </style>
</head>
<body >
    <canvas id="canvas" width="900px" height="468px">
        
    </canvas>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var width = canvas.width;
    var height = canvas.height;

    // context.fillStyle = "#008ce1";  //填充色
 //     context.strokeStyle = "#515151";  //描边色
 //     context.globalAlpha = 0.5;   // 透明度

    // context.fillRect(10,20,100,100); //x,y,w,h 方形
    // context.strokeRect(10,150,88,88); //描边
    // context.clearRect(20,30,50,50); //橡皮擦

    //随机颜色函数
    function randomColor(){
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var color = ‘rgb(‘+r+‘,‘+g+‘,‘+b+‘)‘;
        console.log(color);
        return color;
    }

    //canvas内随机位置大小方框函数
    function randomSize(){
      var x = Math.random()*width;
      var y = Math.random()*height;
      var w = Math.random()*(width-x);
      var h = Math.random()*(height-y);
      var data =http://www.mamicode.com/ [x,y,w,h];
      console.log(data);
      return data;
    }

    //canvas内随机位置出现随机大小颜色方框
    function randomRect(){
        context.strokeStyle = randomColor();
        var data =http://www.mamicode.com/ randomSize();
        context.strokeRect(data[0],data[1],data[2],data[3]);
        //递归每隔0.5秒执行一次当前函数
        setTimeout(randomRect,500);

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

 

canvas初体验


联系
我们