Html5 canvas

最新推荐文章于 2025-06-17 10:52:14 发布

原创最新推荐文章于 2025-06-17 10:52:14 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas

Html5是新一代的html标准，它能更完美的契合js和css样式，其中的canvas标签能更方便的画出想要的图形。

下面就是canvas的一些简单应用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>综合案例</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>

<canvas id="can" style="height:500px;width:500px;border:1px solid black;">
</canvas>
<script>

//利用DOM得到canvas画布
   var can1=document.getElementById("can");

//得到画笔（除了矩形，其余所有图形都需要beginPath()、closePath()）

    var ctx=can1.getContext("2d");
   //画直线：
   //开始路径
   ctx.beginPath();
   //定义起点
   ctx.moveTo(20,20);
   //定义终点
   ctx.lineTo(20,50);
   //结束路径
   ctx.closePath();
   //画线
   ctx.stroke();
   //画矩形(通过fillStyle改变填充颜色)：
   ctx.fillStyle="blue";
   ctx.fillRect(40,20,50,50);
   //画圆：arc(x,y,radio(半径)，起始弧度，结束弧度，逆/顺时针旋转)
   ctx.beginPath()
   ctx.arc(120,40,20,0,360);
   ctx.closePath();
   ctx.fill();
   //画三角形：
   ctx.beginPath();
   //定义第一个顶点
   ctx.moveTo(150,20);
   //定义第二个顶点
   ctx.lineTo(150,40);
   //定义第三个顶点
   ctx.lineTo(200,40);
   ctx.closePath();
   ctx.stroke();
   //画字体：
   ctx.font="30px Arial";
   ctx.fillStyle="red";
   ctx.fillText("hello",0,120);
   //画图片
   var img=new Image();
   img.src="fss.png";
   ctx.drawImage(img,120,120,80,80);

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