利用＜canvas＞标签绘制三角形。

最新推荐文章于 2024-04-15 07:51:21 发布

li宾是我哥

最新推荐文章于 2024-04-15 07:51:21 发布

阅读量1.3k

点赞数 1

文章标签： html javascript

本文链接：https://blog.csdn.net/gx01013/article/details/125807009

版权

定义：

HTML5 <canvas> 标签用于绘制图像。

<canvas> 元素本身并没有绘制能力，须通过脚本来完成绘图。

例：

<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script type="text/javascript">    
        //1.获取一个画布（要创建一个画布对象）
        var canvas=document.getElementById("canvas");
        //2.创建一个画布上下文对象
		var context=canvas.getContext("2d");
        //3.告诉程序绘画路径开始
		context.beginPath();
		//4.绘制图形的起始点（坐标）
		context.moveTo(0,0);    
        //5.绘制图形的连接点
        context.lineTo(100,100);
        context.closePath(); //闭合
        //6.设置图形的样式
		context.strokeStyle="red"
		//7.描边
		context.stroke();
		//8.填充颜色
		context.fillStyle="green"; //先选择颜色
		context.fill();	//再填充
    </script>
</body>

效果图：