用代码绘制简笔画

最新推荐文章于 2023-01-24 20:12:33 发布

礼礼。

最新推荐文章于 2023-01-24 20:12:33 发布

阅读量1k

点赞数

分类专栏： JS曲线

本文链接：https://blog.csdn.net/weixin_45736311/article/details/113405132

版权

HTML5 Canvas 图形绘制 JavaScript 路径

关键词由CSDN通过智能技术生成

JS曲线专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.beginPath();              
ctx.lineWidth="5";
ctx.strokeStyle="red";  // 红色路径
ctx.moveTo(0,250);
ctx.lineTo(200,250);
ctx.lineTo(240,150);
ctx.lineTo(280,250);
ctx.lineTo(320,350);
ctx.lineTo(360,250);
ctx.lineTo(600,250);
ctx.stroke();  // 进行绘制

ctx.beginPath();
ctx.strokeStyle="black";  // 黑色路径
ctx.moveTo(90,247);
ctx.lineTo(63,230); 
ctx.lineTo(60,220);  
ctx.lineTo(60,210); 
ctx.lineTo(75,205); 
ctx.lineTo(85,210);
ctx.lineTo(90,215); 
ctx.lineTo(90,215); 

ctx.lineTo(95,210); 
ctx.lineTo(105,205); 
ctx.lineTo(120,210); 
ctx.lineTo(120,220); 
ctx.lineTo(117,230);
ctx.lineTo(90,247); 
ctx.stroke();  // 进行绘制

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

礼礼。

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
用代码绘制简笔画

简单的画一张画<!DOCTYPE html><html><body><canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>var c=document.getElement
复制链接

扫一扫