HTML5中canvas画图之根据触摸点画三角形

谁借莪１个温暖的怀抱￠ 2022-08-23 05:50 212阅读 0赞

上一篇博文中说了利用canvas画固定的三角形，现在来试下触摸屏幕，然后根据触摸点画三角形。每触摸一下屏幕就画一个点。刚刚我醉死了，绘制路径的时候竟然把后面的lineTo写成了moveTo,检查了代码很久也没有解决，后来才发现。其实现在还有一点没有解决，就是那个根据屏幕自动设置canvas画布的宽度，也就是自适应。查资料也没有看到，网上的那些方法试了下还是没有解决。望知道的朋友说下。不甚感激！

代码如下:

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,user-scalable=no"/>
    	<title>触摸屏幕时绘制三角形</title>
    </head>
    <body  >
    	<canvas id="cnavas" width="800" height="300" ></canvas>
    	<script type="text/javascript">
    	
    		//取得绘图用的上下文
    		var canvas=document.getElementById("cnavas");
    		var ctx=canvas.getContext("2d");
    		//设置canvas的onmouse事件
    		canvas.οnmοusedοwn=function(event){
    		//取得触摸点的坐标点
    		var x=event.x;
    		var y=event.y;
    		var r=30;
    
    		//路径指定
    		ctx.beginPath();
    		ctx.moveTo(x,y);
    		ctx.lineTo(x,y+r);
    		ctx.lineTo(x+r,y+r);
    		ctx.lineTo(x,y);
    		
    		//绘图
    		ctx.strokeStyle="red";
    		ctx.stroke();
    		};
    	</script>
    </body>
    </html>

![Center][]

[Center]: /images/20220721/bc172fd7d06e41688b356b765a782d66.png

发表评论取消回复

表情：

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

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

相关阅读

相关 html5canvas中波浪线怎么画,html5 canvas画波浪

要实现这样的动画普通的CSS3是鞭长莫及了，只能使用Canvas。好在使用canvas也非常简单。 Step1. 新建一个画布()元素，并放在所有按钮和logo的下方以免遮

朴灿烈づ我的快乐病毒、/ 2022年10月12日 01:20/ 0 赞/ 66 阅读

相关 html5 canvas画云

使用函数画出天空的云层图像： ![云层][SouthEast]y 主要使用到的是数学的圆与弧度之间转换关系：代码如下

亦凉/ 2022年08月26日 12:21/ 0 赞/ 576 阅读

相关 HTML5中canvas画图之绘制数据图表

上一篇博文绘制了一个方格图，现在来绘制一个数据图表。实现的效果如下: ![Center][] 实现代码如下: <!DOCTYPE html> <ht

悠悠/ 2022年08月23日 08:10/ 0 赞/ 313 阅读

相关 HTML5中canvas画图之绘制方格图

下一篇博文是准备绘制折线数据图的，这个绘制方格图是为绘制折线图做准备。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在canvas上绘制一系列的横线和竖线即可。下面是具

港控/mmm°/ 2022年08月23日 05:58/ 0 赞/ 420 阅读

相关 HTML5中canvas画图之画矩形和矩形掏空

rect方法用于绘制矩形（长方形）。其语法如下: context.rect(x，y，高度，宽度); 绘制代码如下: <!DOCTYPE html> <ht

不念不忘少年蓝@/ 2022年08月23日 05:51/ 0 赞/ 278 阅读

相关 HTML5中canvas画图之画圆形

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线

桃扇骨/ 2022年08月23日 05:51/ 0 赞/ 270 阅读

相关 HTML5中canvas画图之根据触摸点画三角形

上一篇博文中说了利用canvas画固定的三角形，现在来试下触摸屏幕，然后根据触摸点画三角形。每触摸一下屏幕就画一个点。刚刚我醉死了，绘制路径的时候竟然把后面的lineTo写成了

谁借莪１个温暖的怀抱￠/ 2022年08月23日 05:50/ 0 赞/ 213 阅读

相关 HTML5中canvas画图之绘制路径

刚开始认真学习H5，虽然以前大概看过H5的教程，但是都是属于空看，一直没有认真练习，所以打算从现在开始来认真练习。下面的代码实现的功能是绘制一个三角形。代码比较简单。

待我称王封你为后i/ 2022年08月23日 05:49/ 0 赞/ 266 阅读

相关【html5每日练习】html5 canvas画线

现在网络最火的是html5，没有之一，虽然正式版还没有出，但咱们可以期待着在未来几年，html5会霸占了互联网，所以毫无疑问得加入到html5的学习之中，谁学得快，谁就有可能把

港控/mmm°/ 2022年06月13日 10:50/ 0 赞/ 290 阅读

相关画圆角 - HTML5 Canvas 作图

2、function DrawAOBArc(Canvas,A,O,B,Radius) 功能：[画圆角][Link 1] 参数：Radius：[圆角][Link 1]的大

冷不防/ 2021年12月05日 16:10/ 0 赞/ 436 阅读