HTML5之Canvas画布属性--画直线、画三角、画矩形

最新推荐文章于 2023-02-08 10:33:51 发布

huahua1208

最新推荐文章于 2023-02-08 10:33:51 发布

阅读量848

点赞数 1

文章标签： Canvas画布属性

本文链接：https://blog.csdn.net/huahua1208/article/details/50624239

版权

画直线

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

</script>

<script>

window.οnlοad=function(){

draw();

};

function draw(){

var canvas=document.getElementById("myCanvas");

var cxt=canvas.getContext("2d");

cxt.moveTo(20,20);

cxt.lineTo(20,90);

cxt.stroke();



画三角

cxt.beginPath();

cxt.moveTo(20,40);

cxt.lineTo(40,90);

cxt.lineTo(80,90);

cxt.closePath();

cxt.stroke();



画矩形

cxt.strokeRect(100,20,50,50);





context.fillRect(x, y, width, height);

}

</script>

</head>

<body>

<canvas id="myCanvas" width="200" height="200"

style="border:dotted 2px black">

sorry!your browser doesn't support Canvas.

</canvas>

</body>

</html>

huahua1208

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5之Canvas画布属性--画直线、画三角、画矩形

画直线window.onload=function(){draw();};function draw(){var canvas=document.getElementById("myCanvas");var cxt=canvas.getContext("2d");cxt.moveTo(20,20);cxt.lineTo
复制链接

扫一扫