h5 canvas标签

HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。


用canvas容器画两条对角线：

<!DOCTYPE html><html>

   <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
<style type="text/css">

<!--设置canvas容器背景颜色-->
    canvas{
        background-color: #34495E;
    }

</style>

<body>

<!--
canvas 容器默认 
width="300px" height="150px"
-->
<canvas id="canvas" width="300px" height="300px">
</canvas>
<script>
<!--canvas画笔-->
var can = document.getElementById("canvas");
var c = can.getContext("2d");
c.lineWidth=20;
c.strokeStyle = "red";
c.moveTo(0,0);//起点坐标
c.lineTo(300,300);//终点坐标
c.moveTo(300,0);//下一个起点坐标
c.lineTo(0,300);//终点坐标
c.stroke();//开始画
</script> 
</body>
</html>

 详情：https://www.w3school.com.cn/html5/html5_ref_canvas.asp

posted @ 2020-03-24 22:40  Jie_dy  阅读(181)  评论(0)  编辑  收藏  举报