canvas绘制箭头

分手后的思念是犯贱 2022-01-09 15:47 267阅读 0赞

效果图

[![wKiom1h95HGixar3AAAXbZ2pCpU560.png-wh\_50][wKiom1h95HGixar3AAAXbZ2pCpU560.png-wh_50]][wKiom1h95HGixar3AAAXbZ2pCpU560.png-wh_50]

html结构

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>canvas6</title>

<link rel="stylesheet" href="">

</head>

<body>

<canvas id="canvas" style ="border:1px solid \#aaa;diplay:block;margin:50px auto;">

当前浏览器不支持canvas,请更换浏览器后再试

</canvas>

</body>

</html>

js脚本

<script>

window.onload = function()\{

var canvas = document.getElementById('canvas');

canvas.width = 800;

canvas.height = 800;

var context = canvas.getContext('2d');

context.beginPath();

context.moveTo(100,350);

context.lineTo(500,350);

context.lineTo(500,200);

context.lineTo(700,400);

context.lineTo(500,600);

context.lineTo(500,450);

context.lineTo(100,450);

// context.lineTo(100,350);

context.closePath();

context.strokeStyle = "\#058";

context.lineWidth = 10;

context.stroke();

\}

</script>

[![QQ截图20181014143201.jpg][QQ_20181014143201.jpg]][QQ_20181014143201.jpg_QQ_20181014143201.jpg]

转载于:https://blog.51cto.com/suyanzhu/1892681

[wKiom1h95HGixar3AAAXbZ2pCpU560.png-wh_50]: /images/20220109/578c18aacc8240e5b8c00aafaef3079f.png
[QQ_20181014143201.jpg]: https://s1.51cto.com/images/20181015/1539609636420120.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[QQ_20181014143201.jpg_QQ_20181014143201.jpg]: /images/20220109/89511086754b4219a84827cc6a928430.png

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关 html canvas 绘制倒影,canvas

JavaScript let t = 0; const colors = \["\161616", "\cf894c", "\c74962"\]; const canva

系统管理员/ 2022年10月10日 06:24/ 0 赞/ 217 阅读

相关 OpenCV绘制箭头

转载自：[http://tmjfzy.blog.163.com/blog/static/664470252012225101017794/][http_tmjfzy.blog.

短命女/ 2022年08月14日 05:42/ 0 赞/ 163 阅读

相关 canvas绘制七巧板

首先推荐的课程学习是《[炫丽的倒计时效果Canvas绘图与动画基础][Canvas]》，感谢liuyubobobo的讲解。偶然之间发现了这门canvas的课程，本来一直都在

落日映苍穹つ/ 2022年08月12日 01:17/ 0 赞/ 197 阅读

相关 Canvas箭头动画

先上效果图: ![20180606104834679][] 代码 <!DOCTYPE html> <html> <head>

忘是亡心i/ 2022年05月23日 02:18/ 0 赞/ 271 阅读

相关 Canvas学习：绘制箭头

原文出处：[https://www.w3cplus.com/canvas/drawing-arrow.html][https_www.w3cplus.com_canvas_dr

ゝ一纸荒年。/ 2022年05月22日 23:12/ 0 赞/ 454 阅读

相关 canvas绘制箭头

效果图 [![wKiom1h95HGixar3AAAXbZ2pCpU560.png-wh\_50][wKiom1h95HGixar3AAAXbZ2pCpU560.png-wh

分手后的思念是犯贱/ 2022年01月09日 15:47/ 0 赞/ 268 阅读

相关 Canvas绘制曲线

文章目录圆弧贝塞尔曲线圆弧圆弧使用`arc`方法绘制，画圆的时候画的弧度是从0到2π，而想要画圆弧就调整参数只画出部分圆即可。 co

深碍√TFBOYSˉ_/ 2021年12月14日 13:49/ 0 赞/ 529 阅读

相关 canvas 绘制虚线

一.分析原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个

阳光穿透心脏的1/2处/ 2021年09月12日 01:36/ 0 赞/ 464 阅读

相关 canvas绘制直线

说明： lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。 moveTo(x, y) 将笔移动到指定的坐标x以及y上。 s

迈不过友情╰/ 2021年07月24日 16:57/ 0 赞/ 485 阅读

相关 canvas 图片绘制、视频绘制

canvas 1.canvas中绘制图片: img对象.onload=function(){ bi.drawImage

た入场券/ 2021年07月24日 11:36/ 0 赞/ 509 阅读