canvsa的概念以及使用canvas绘制简单图形、以及绘制一个简单太极图

执笔丶画苍生

已于 2022-08-05 19:16:45 修改

阅读量478

点赞数 2

文章标签：大数据

于 2022-07-15 16:53:51 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63716324/article/details/125807268

版权

本文介绍了HTML5的canvas元素，详细阐述了canvas的基本概念、创建画布的步骤，并通过实例展示了如何绘制三角形、矩形、圆和椭圆，以及如何利用context.setLineDash()方法画虚线，最后演示了如何绘制一个太极图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、canvas概念

是在HTML5中新增的标签，用于在网页中生成图像，可以操作图像内容，还可以使用JavaScript操作的位图

canvas是一个画布标签，默认情况下，它在网页上是一篇空白的区域，大小为300px*150px

<canvas id='canvas' width="500" height="500"> 
    <!--设置画布大小为500*500-->
    浏览器版本过低，不支持canvas画布，请升级
</canvas>

2、创建画布的基本步骤

<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 = "black";
    //7、描边
         context.stroke();
    //8、填充
        // 设置要给图形填充的颜色
         context.fillStyle = "green";
        // 填充
         context.fill(); 
</script>

3、使用canvas绘制简单图像

01、绘制三角形

<script type="text/javascript">

    //告诉程序绘画路径开始
         context.beginPath();
    //绘制图形的起始点（坐标）
         context.moveTo(0, 0);
    //绘制图像的连接点
         context.lineTo(0, 300);
         context.lineTo(300, 300);
         context.lineTo(0, 0);
         context.closePath();
    //设置图形的样式
         context.strokeStyle = "black";
    //描边
         context.stroke();
        // 设置要给图形填充的颜色
         context.fillStyle = "green";
        // 填充
         context.fill(); 
</script>

02、用函数fillRect(x,y,width,height) 绘制简单矩形并在其中清空一个矩形

<script type="text/javascript">
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
	//调用一个画矩形的函数 fillRect(x,y,width,height)
	context.fillStyle="red";
	context.fillRect(0,0,300,300);
	//在给定矩形内清空一个矩形
	context.clearRect(10, 10, 50, 50);
</script>

03、绘制圆

<script type="text/javascript">
   	    context.beginPath();
        context.arc(100, 100, 50, 0, Math.PI*2, true);//设置 X轴 Y轴 半径 起点
        context.closePath();
        context.stroke();
</script>

04 、绘制椭圆

<script type="text/javascript">
        context.beginPath();
                     // X轴 Y轴 第一个半径 第二个半径 旋转角度 起始角度 结束角度 true
        context.ellipse(100,100,50,30,0,0,Math.PI*2,true);
        context.stroke();
</script>

4、用context.setLineDash([ ]);方法实现虚线

<script type="text/javascript">
   		context.beginPath();//告诉程序绘画路径开始
 		context.moveTo(0, 0);//绘制图形的起始点
         context.lineTo(300, 300);//绘制图像连接点
		context.setLineDash([10,10,5]);//虚线的呈现方式“[10,10,5]”数字表示绘制长度为10的线段后空出长度为10的间隔然后再画出长度为5的线段，然后以此循环
         context.closePath();//闭合路径
</script>

5、绘制一个太极图

<body style="background-color: steelblue;">
    <canvas width="1000" height="1000" id="cv"></canvas>
    <script>
        var c = document.getElementById("cv")
        var cv = c.getContext('2d')
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 500, 150, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 75, 0.5 * Math.PI, 1.5 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 75, 0.5 * Math.PI, 1.5 * Math.PI, true)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 425, 20, 0, 2 * Math.PI, false)
        cv.fillStyle = "black"
        cv.fill()
        cv.beginPath()
        cv.arc(500, 575, 20, 0, 2 * Math.PI, false)
        cv.fillStyle = "white"
        cv.fill()
    </script>

</body>