Canvas (1) - Githubissues

goldEli / Front-End-Training

Front End Training

2 stars 5 forks source link

Canvas (1) #26

Open goldEli opened 4 years ago

goldEli commented 4 years ago

什么是 Canvas
用 Canvas 画一个红色的圆（附上代码）

lurasso commented 4 years ago

Canvas是h5的画布工具，可以通过js画任何你想画的东西。丰富浏览器图形元素

<canvas id="canvas" width="600" height="400"></canvas>
    <script>
        // function draw(){
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = 'red';
            ctx.arc(300,200,100,0,Math.PI*2)
            ctx.fill();
        // }
    </script>

FireDragonZL commented 4 years ago

[x] Canvas是由HTML代码配合高度和宽度属性定义的可绘制区域。JS代码可以该区域来动态生成一些图形。他本质是H5新增的标签。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas实现圆</title>
</head>
<body>
<canvas id="vas" width="300" height="300"></canvas>
<script>
    var canvas = document.getElementById("vas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.arc(100, 100, 100, 0, Math.PI * 2)
    ctx.fill();
</script>
</body>
</html>

748580573 commented 4 years ago

创建一个画布，通过js脚本在画布上画东西

画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border: 1px solid #000000;"></canvas>
</body>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle="red";
    ctx.arc(50,50,50,0,Math.PI * 2);
    ctx.stroke();
    ctx.fill();
</script>
</html>

arc(x,y,radius,start,end),

x,y确定圆心位置,radius设置半径，start起始弧度，end结束弧度