Canvas基础5-全屏随机画圆点练习

来源：互联网发布：车牌号码测吉凶算法编辑：程序博客网时间：2024/06/05 16:57

所涉及的知识点基本均来自前4篇Canvas基础

<!--html--><!DOCTYPE html><html><head>    <title>WebChat JieTiGame</title>    <meta charset="utf-8">    <link rel="stylesheet" href="css/mycss.css" /></head><body>    <canvas id="game" width="768" height="400">        <!--Sorry,your web browser does not support Canvas context.-->    </canvas>    <script src="js/jquery-1.9.1.js"></script>    <script src="js/myjs.js"></script></body></html>

/*mycss.css*/canvas{display:block;}*{    margin:0;    padding:0;}html,body{    height:100%;    width:100%;}

//myjs.jsfunction drawCircle(ctx,x,y,Radius){    ctx.fillStyle = "rgba(255,0,0,.9)";    ctx.beginPath();    ctx.arc(x,y,Radius,0,Math.PI*2,true);    ctx.closePath();    ctx.fill();}$(document).ready(function(){    var canvas = $("#game");    var ctx = canvas.get(0).getContext("2d");    var circleRadius = 10;    $(window).resize(resizeCanvas);    function resizeCanvas(){        ctx.fillStyle = "red";        canvas.attr("width",$(window).get(0).innerWidth);        canvas.attr("height",$(window).get(0).innerHeight);        ctx.fillRect(0,0,canvas.width(),canvas.height());        var width = canvas.get(0).width - 20;        var height = canvas.get(0).height - 20;        var circleCount = 10;        for (var i=0; i<circleCount; i++){            var x = 10 + Math.random()*width;            var y = 10 + Math.random()*height;            drawCircle(ctx,x,y,circleRadius);        }    }    resizeCanvas();});

结果：