html5中canvas基本应用

àì夳堔傛蜴生んèń 2022-03-18 08:52 240阅读 0赞

<!DOCTYPE html> 
    <head> 
    <meta charset=utf-8> 
    <title>canvas</title>
    <script src="jquery.min.js"></script>
    </head>
    <body>
    <canvas id="php100" width="500" height="500" οnmοusemοve="mousexy(event)"></canvas>
    <div id="ds"></div>
    <script type="text/javascript">
    var c=document.getElementById("php100");
    var p100=c.getContext("2d");
    p100.fillStyle="#FF0000"; //定义颜色
    p100.fillRect(0,0,300,300); //定义矩形的大小
    p100.fillStyle="rgba(0,0,255,0.5)"; //定义颜色，支持透明
    p100.fillRect(200,200,300,300); //定义矩形大小
    
    
    //========线======
    p100.moveTo(10,10); //起始位置
    p100.lineTo(150,50); //终止位置
    p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画
    p100.stroke(); //结束图形
    
    
    //=======圆=======
    p100.fillStyle="blue"; //定义演示
    p100.beginPath(); //从新开始画，防止冲突重叠
    p100.arc(200,200,30,0,Math.PI*2,true); //x坐标，y坐标，直径，Math.PI是圆周率
    p100.closePath(); //结束画布，防止冲突重叠
    p100.fill(); //结束渲染
    
    
    //======颜色渐变====
    var grd=p100.createLinearGradient(100,100,175,50); //颜色渐变的起始坐标和终点坐标
    grd.addColorStop(0,"yellow"); //0表示起点..0.1 0.2 ...1表示终点，配置颜色
    grd.addColorStop(1,"blue");
    
    
    p100.fillStyle=grd; //生成的颜色块赋值给样式
    p100.fillRect(100,100,175,50); //设置色块
    //=======图形载入=====
    
    
    var img=new Image()
    img.src="logo.png"
    p100.drawImage(img,220,30);
    
    
    
    
    //监视鼠标
    function mousexy(n)
    {
    x=n.clientX;
    y=n.clientY;
    document.getElementById("ds").innerHTML="坐标: x轴"+x+" y轴"+y;
    }
    
    
    </script>
    </body> 
    </html>