《canvas画图》

最新推荐文章于 2022-08-01 17:00:05 发布

刘贵庆

最新推荐文章于 2022-08-01 17:00:05 发布

阅读量4.9k

点赞数

分类专栏：前端 js html 文章标签： canvas

本文为博主原创文章，未经博主允许请勿转载，切勿用于商业用途，若有引用请加原文链接。

本文链接：https://blog.csdn.net/xysxlgq/article/details/119879356

版权

前端同时被 3 个专栏收录

56 篇文章 0 订阅

订阅专栏

36 篇文章 1 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

抽了一些时间写些笔记。

矩形：

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: thin solid black;
        }
        body > * {
            float: left;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500px" height="120px"></canvas>
<script type="text/javascript">
var ctx=document.getElementById('canvas').getContext('2d');

ctx.strokeStyle='red';
ctx.lineWidth='2';
ctx.beginPath();
ctx.moveTo(0,50);
ctx.lineTo(200,50);
ctx.stroke();

ctx.strokeStyle='blak';
ctx.lineWidth=40;

var xpos=50;
var styles=["butt","round","square"];
for(i=0;i<styles.length;i++){
    ctx.beginPath();
    ctx.lineCap=styles[i];
    ctx.moveTo(xpos,50);
    ctx.lineTo(xpos,150);
    ctx.stroke();
    xpos+=50;
}
</script>
</body>
</html>

圆形：

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        canvas {
            border: thin solid black;
        }

        body > * {
            float: left;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="150"></canvas>
<script>
    var canvas = document.getElementById('canvas').getContext('2d');
    canvas.fillstyle = 'yellow';
    canvas.lineWidth = '3';
    canvas.beginPath();
    canvas.arc(70, 70, 60, 0, Math.PI * 2, true);
    canvas.stroke();

    canvas.beginPath();
    canvas.arc(200, 70, 60, Math.PI / 2, Math.PI, true);
    canvas.fill();
    canvas.stroke();

    canvas.beginPath();
    var val = 0;
    for (var i = 0; i < 4; i++) {
        canvas.arc(350, 70, 60, val, val + Math.PI / 4, false);
        val += Math.PI / 2;
    }

    canvas.closePath();
    canvas.fill();
    canvas.stroke();
</script>
</body>
</html>

三角形矩形：

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas矩形</title>
    <style type="text/css">
        canvas{
            border:thin solid black;
        }
        body >*{
            float:left;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="150"></canvas>
<script type="text/javascript">
    var can=document.getElementById('canvas').getContext('2d');
    can.fillStyle='yellow';
    can.strokeStyle='black';
    can.lineWidth=4;

    can.beginPath();
    can.moveTo(110,10);
    can.lineTo(110,100);
    can.lineTo(10,10);
    can.closePath();

    can.rect(120,10,100,90);
    can.rect(150,110,130,20);

    can.fill();
    can.stroke();
</script>
</body>
</html>

圆弧：

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas2d矩形</title>
    <style type="text/css">
        canvas2d {
            border: thin solid black;
        }

        body > * {
            float: left;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="150"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var canvas2d = canvas.getContext('2d');
    var point1 = [100, 10];
    var point2 = [200, 10];
    var point3 = [200, 110];

    draw();

    canvas2d.onmousemove = function (e) {
        if (e.ctrlKey) {
            point1 = [e.clientX, e.clientY];
        } else if (e.shiftKey) {
            point2 = [e.clientX, e.clientY];
        } else {
            point3 = [e.clientX, e.clientY];
        }
        canvas.clearRect(0, 0, 540, 140);
        draw();
    }


    function draw() {
        canvas2d.fillstyle = 'yellow';
        canvas2d.strokeStyle = 'black';
        canvas2d.lineWidth = 4;

        canvas2d.beginPath();
        canvas2d.moveTo(point1[0], point1[1]);
        canvas2d.arcTo(point2[0], point2[1], point3[0], point3[1], 100);
        canvas2d.stroke();

        point(point1[0], point1[1]);
        point(point2[0], point2[1]);
        point(point3[0], point3[1]);

        canvas2d.beginPath();
        canvas2d.moveTo(point1[0], point1[1]);
        canvas2d.lineTo(point2[0], point2[1]);
        canvas2d.lineTo(point3[0], point3[1]);
        canvas2d.stroke();

    }


    function point(x,y) {
        canvas2d.lineWidth = 1;
        canvas2d.strokeStyle = 'red';
        canvas2d.strokeRect(x - 2, y - 2, 4, 4);
    }

</script>
</body>
</html>

参考：HTML5权威指南

刘贵庆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《canvas画图》

抽时间整理了下笔记。矩形：code:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: thin solid black; } body >.
复制链接

扫一扫

专栏目录