用画布画一些图形

最新推荐文章于 2024-07-12 21:45:48 发布

原创最新推荐文章于 2024-07-12 21:45:48 发布 · 305 阅读

CC 4.0 BY-SA版权

用画布画一些图形

矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布</title>
    <style>
        #canvas{
            border: 1px solid orange;
            /*在样式里设置宽高不行  这里设置的是“画板”的宽高  只能通过js或者属性设置*/
            /*width: 1000px;*/
            /*height: 600px;*/
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600px" height="300px"></canvas>
</body>
<script>
//    console.log(document.getElementById('canvas').width);
    //1.准备画布标签
    //2.查找画布元素
    //3.获取画布对象
    //3.调用画布的API作图


    var canvas = document.getElementById("canvas");
    var cvs = canvas.getContext("2d");
    cvs.beginPath();//开始作画
    cvs.lineWidth = 30;
    cvs.lineCap = "round";//圆角
    cvs.lineJoin = "bevel";//平角
    cvs.strokeStyle="#0000ff";
    cvs.moveTo(50,50);//起点
    cvs.lineTo(450,50);//第二点
    cvs.lineTo(450,250);//第三点
    cvs.lineTo(50,250);//第四点
    cvs.lineTo(50,50);//回到起点
    //cvs.closePath();//和上面一样的效果
    cvs.stroke()

</script>
</html>

矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布矩形</title>
    <style>
        #canvas {
            border: 1px solid orange;
            /*在样式里设置宽高不行  这里设置的是“画板”的宽高  只能通过js或者属性设置*/
            /*width: 1000px;*/
            /*height: 600px;*/
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600px" height="300px"></canvas>
</body>
<script>
    //console.log(document.getElementById('canvas').width);
    //1.准备画布标签
    //2.查找画布元素
    //3.获取画布对象
    //3.调用画布的API作图


    var canvas = document.getElementById("canvas");
    var cvs = canvas.getContext("2d");
    cvs.beginPath();//开始作画
    cvs.strokeStyle = "silver";
    cvs.fillStyle = "gold";
    cvs.lineWidth = 5;
    cvs.rect(50, 50, 500, 200);
    cvs.stroke();//描边
    cvs.fill();//填充

</script>
</html>

圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布圆</title>
    <style>
        #canvas {
            border: 1px solid orange;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600px" height="600px"></canvas>
</body>
<script>

    var canvas = document.getElementById("canvas");
    var cvs = canvas.getContext("2d");
    cvs.beginPath();//开始作画
    cvs.strokeStyle = "silver";
    cvs.fillStyle = "gold";
    cvs.lineWidth = 5;
    cvs.arc(300,300,270,0,2*Math.PI);
    cvs.stroke();//描边
    cvs.fill();//填充

</script>
</html>

扇形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布扇形</title>
    <style>
        #canvas {
            border: 1px solid orange;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600px" height="600px"></canvas>
</body>
<script>

    var canvas = document.getElementById("canvas");
    var cvs = canvas.getContext("2d");
    cvs.beginPath();//开始作画
    //cvs.strokeStyle = "gold";
    cvs.fillStyle = "gold";
    cvs.lineWidth = 5;
    cvs.moveTo(300,300);
    cvs.arc(300,300,270,0,1.1*Math.PI);
    cvs.closePath();
    //cvs.stroke();//描边
    cvs.fill();

    //cvs.strokeStyle = "green";
    cvs.fillStyle = "mediumspringgreen";
    cvs.beginPath();
    cvs.moveTo(300,300);
    cvs.arc(300,300,270,1.1*Math.PI,1.4*Math.PI);
    cvs.closePath();
    //cvs.stroke()
    cvs.fill();

    //cvs.strokeStyle = "green";
    cvs.fillStyle = "deepskyblue";
    cvs.beginPath();
    cvs.moveTo(300,300);
    cvs.arc(300,300,270,1.4*Math.PI,1.8*Math.PI);
    cvs.closePath();
    //cvs.stroke()
    cvs.fill();

    //cvs.strokeStyle = "green";
    cvs.fillStyle = "red";
    cvs.beginPath();
    cvs.moveTo(300,300);
    cvs.arc(300,300,270,1.8*Math.PI,2*Math.PI);
    cvs.closePath();
    //cvs.stroke()
    cvs.fill();

</script>
</html>

文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style>
        #canvas {
            border: 1px solid orchid;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600px" height="400px"></canvas>
</body>

<script>
    var canvas = document.getElementById("canvas");
    var cvs = canvas.getContext("2d");
    cvs.beginPath();
    cvs.fillStyle = "deepskyblue";
    cvs.font = "30px 微软雅黑";
    cvs.fillText("Surprise Mother Fucker",50,100);//从左下角开始算 后两个数是xy坐标

    //空心字体
    cvs.strokeStyle = "gold";
    cvs.font = "45px 宋体";
    cvs.strokeText("Surprise Mother Fucker",50,200);

    //颜色渐变
    cvs.font = "45px 宋体";
    var gradient = cvs.createLinearGradient(50,200,450,300);//xy轴开始位置 xy轴结束位置
    gradient.addColorStop(0,"blue");
    gradient.addColorStop(0.5,"red");
    gradient.addColorStop(1,"green");
    cvs.fillStyle = gradient;
    cvs.fillText("Surprise Mother Fucker",50,300);


</script>
</html>