Canvas（2）及简单的点击监听事件

最新推荐文章于 2024-06-05 14:45:33 发布
最新推荐文章于 2024-06-05 14:45:33 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45128748/article/details/107568913
版权

Canvas（2）及简单的点击监听事件

onclick：点击监听事件
平移坐标系统：ctx.translate(*,*)；
scale():改变图形大小（即缩放）(它除了改变图形大小之外，还会改变其他属性如线条宽度（即lineWidth）、左上角坐标等)
rotate():旋转函数，通过指定的角度参数使元素相对原点进行旋转
它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
fillRect(*,*,*,*);:填充一个矩形（若不设置填充颜色，默认为黑色）

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<title>坐标变换</title>
	</head>
	<body>
		<h2>坐标变换</h2>
	<canvas id="mc5" width="420" height="320"
		style="border:1px solid black"></canvas>
		<!--js（点击监听事件onclick）变颜色-->
	<div id="show" onclick="change();" style="width:190px;height:200px;background-color:red;"></div>
	<script type="text/javascript">
	//获取canvas元素对应的DOM对象
		var canvas=document.getElementById('mc5');
	//获取canvas上绘图的CanvasRenderingContext2D对象
		var ctx=canvas.getContext('2d');
		ctx.fillStyle="rgba(255,0,0,0.3)";
		//图形绘制
		ctx.translate(30,200);//平移坐标
		for(var i=0;i<50;i++){
			ctx.translate(50,50);
			ctx.scale(0.93,0.93);//改变图形大小（即缩放）(它除了改变图形大小之外，还会改变其他属性如线条宽度（即lineWidth）、左上角坐标等)
			ctx.rotate(-Math.PI/10);//旋转函数，通过指定的角度参数使元素相对原点进行旋转
			//它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
			ctx.fillRect(0,0,150,75);
		}
		var change=function(){
			var div=
			document.getElementById('show');
			div.style.backgroundColor=
			div.style.backgroundColor=='red'?
			'green':(div.style.backgroundColor=='green'?'blue':'red');
		}
	</script>
	</body>
</html>

在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200724202044417.png
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

创建线性渐变：createLinearGradient(*,*,*,*)
创建圆形渐变：createRadialGradient(*,*,*,*,*,*)
向（线性、圆形等）渐变上添加颜色：addColorStop(数值,"颜色")
设置使用（线性、圆形等）渐变作为填充颜色：ctx.fillStyle=lg;
设置使用（线性、圆形等）渐变作为边框颜色：ctx.strokeStyle=lg2；
保存恢复状态：save()
恢复坐标系统：restore()
save()方法将当前的绘图环境压入堆栈顶部
restore()方法将从栈顶部弹出的一组状态信息，并根据此恢复当前绘图环境的各个状态
添加圆弧：ctx.arc(0,0,80,0,Math.PI*2,true);
arc：前两个参数指定圆弧的圆心，第三个参数指定圆弧的半径，第四五个参数用于设角度，结束角度，最后一个参数用于设置是否顺时针旋转
（填充）是在形状内部的内容：fill()

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<title>线性渐变</title>
	</head>
	<body>
	<h2>线性渐变</h2>
	<canvas id="mc6" width="520" height="320"
		style="border:1px solid black"></canvas>
	<script type="text/javascript">
		var canvas=document.getElementById('mc6');
		var ctx=canvas.getContext('2d');
		//save()方法将当前的绘图环境压入堆栈顶部
		//restore()方法将从栈顶部弹出的一组状态信息，并根据此恢复当前绘图环境的各个状态
		ctx.save();//保存恢复状态
		ctx.translate(30,20);
		lg=ctx.createLinearGradient(0,0,160,80);//创建线性渐变
		lg.addColorStop(0.2,"#f00");//向线性渐变上添加颜色
		lg.addColorStop(0.5,"#0f0");
		lg.addColorStop(0.9,"#00f");
		ctx.fillStyle=lg;//设置使用线性渐变作为填充颜色
		ctx.fillRect(0,0,160,80);//填充一个矩形（若不设置填充颜色，默认为黑色）
		ctx.restore();//恢复坐标系统
		ctx.translate(280,160)//平移坐标系统
		ctx.beginPath();
		ctx.arc(0,0,80,0,Math.PI*2,true);//添加圆弧
		ctx.closePath();
		ctx.lineWidth=12;
		lg2=ctx.createLinearGradient(-40,-40,80,50);//再次创建线性渐变
		lg2.addColorStop(0.1,"#ff0");//向线性渐变上添加颜色
		lg2.addColorStop(0.4,"#0ff ");
		lg2.addColorStop(0.8,"#f0f");
		ctx.strokeStyle=lg2;//设置使用线性渐变作为边框颜色
		ctx.stroke();
	</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<title>圆形渐变</title>
	</head>
	<body>
	<h2>圆形渐变</h2>
	<canvas id="mc7" width="520" height="320"
		style="border:1px solid black"></canvas>
	<script type="text/javascript">
		var canvas=document.getElementById('mc7');
		var ctx=canvas.getContext('2d');
		ctx.save();
		ctx.translate(30,20);
		lg=ctx.createRadialGradient(80,40,5,80,40,60);//创建圆形渐变
		lg.addColorStop(0.2,"#f00");//向圆形渐变上添加颜色
		lg.addColorStop(0.5,"#0f0");
		lg.addColorStop(0.9,"#00f");
		ctx.fillStyle=lg;//设置使用圆形渐变作为填充颜色
		ctx.fillRect(0,0,160,80);//填充一个矩形
		ctx.restore();//恢复坐标系统
		ctx.translate(280,160)//平移坐标系统
		ctx.beginPath();
		ctx.arc(0,0,80,0,Math.PI*2,true);//添加圆弧 
		ctx.closePath();
		ctx.lineWidth=12;
		lg2=ctx.createRadialGradient(0,0,5,0,0,80);//再次创建圆形渐变
		lg2.addColorStop(0.1,"#ff0");//向圆形渐变上添加颜色
		lg2.addColorStop(0.4,"#0ff ");
		lg2.addColorStop(0.8,"#f0f");
		ctx.fillStyle=lg2;//设置使用圆形渐变作为填充颜色
		ctx.fill();//Fill（填充）是在形状内部的内容
	</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<title>点击按钮变色</title>
		<style>
			.text1{
				width:400px;
				height:38px;
				vertical-align:middle; 
			}
			.button{
			background:#1E90FF;
			face:宋体;
			font-size:15; 
			color:#FFFFFF;
			border:none;
			width:100px; 
			height:40px;
			margin-left:-40px; 
			vertical-align:middle;
			}
		</style>
	</head>
	<body>
		<div>
		<input class="text1" type="text" />
        <input class="button" type="button" value="百度一下" id="show" onclick="change();" ><!--onclick：点击监听事件-->
			<script type="text/javascript">
				var change=function(){
					var div=document.getElementById("show");
					div.style.backgroundColor="#d0d0d0";
				}
			</script>
		</div>
		</body>
</html>

在这里插入图片描述
在这里插入图片描述

xiaoxiaojinglinger
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas.addEventListener()
xiaozhen0610的博客
06-05 2516
对 canvas 元素的事件监听用addEventListener()实现， 但是有一点缺陷是：canvas 不支持键盘事件，为了解决这个问题，可以采用以下两种方案： 方案一：key event ---- use window as object 　　通过window对象实现对canvas事件的监听和处理 　　window.addEventListener('keydown', doKeyDown, true); 注：扩大的事件触发的执行对象，可以通过取 canvas 元素的第一级父元素取代 wind..
html5中监听canvas内部元素点击事件的三种方法
12-14
canvas内部元素不能像DOM元素一样方便的添加交互事件监听，因为canvas内不存在“元素”这个概念，他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍，想要监听图形的点击事件思路很简单，只要监听canvas元素本身的点击事件，再判断点击坐标位于哪一个图形内部，就变相实现了图形点击事件。本文将介绍三种方法，判断坐标点是否位于某个canvas图形内部。 约定 本文介绍的三种方法适用于识别canvas内形状不规则而且位置无规律的图形点击事件，对于形状规则或者位置有规律的场景，肯定有更简便的实现，这里不做讨论。 像素法 像素检测法的思路是，将canvas中的多个图形（如果
前端canvas绘图，利用canvas在图片上面绘制标记以及给canvas添加点击事件。
最新发布
Office文件在线预览解析
06-05 267
首先需要一个承载的核心画布。
Canvas的事件处理，监听点击的位置
热门推荐
开心大表哥
02-12 3万+
DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个元素，可以直接用jquery增加click事件$(‘#p1’).click(function(){…})”。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用...
监听Canvas内部元素点击事件的三种方法
10-10 5613
canvas内部元素不能像DOM元素一样方便的添加交互事件监听，因为canvas内不存在“元素”这个概念，他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍，想要监听图形的点击事件思路很简单，只要监听canvas元素本身的点击事件，再判断点击坐标位于哪一个图形内部，就变相实现了图形点击事件。本文将介绍三种方法，判断坐标点是否位于某个canvas图形...
【Canvas】在HTML画布上监听鼠标点击或触摸事件
TA远方
04-17 3124
在做h5 canvas的时候需要注意一点,html网页上用canvas组件在不同平台上交互有时候会失效,需要做兼容处理,那是因为在手机浏览器上的不是鼠标点击,就是屏幕触摸事件.
详解Canvas事件绑定
12-13
那我们想给canvas里的某一张图片添加一个点击事件该怎么做到。而js只能监听到canvas的事件，很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个canvas内部各个图片的事件绑定...
Canvas 鼠标点击生成小圆点
08-10
接下来，我们需要监听鼠标的点击事件。当用户点击Canvas时，会触发`mousedown`事件，我们可以在这个事件的回调函数中处理点击逻辑： ```javascript canvas.addEventListener('mousedown', (event) => { // 获取...
canvas点击吹风
09-08
2. **事件监听** - 要实现点击吹风效果，首先要监听用户的点击事件。这通常通过`addEventListener`方法完成，绑定`'click'`事件到Canvas元素上。 - 当用户点击Canvas时，会触发预设的回调函数，处理点击事件。 3....
Fabricjs对Canvas画布和对象的事件监听
BADAO_LIUMANG_QIZHI的博客
02-10 4209
场景 Fabricjs一个简单强大的Canvas绘图库快速入门： Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上，怎样监听画布上鼠标按下、移动、抬起时的事件，以及画布上对象 被选中、被移动、被旋转、被加入和被移除的事件。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、画布的事.
一个不错的HTML5 Canvas多层点击事件监听实例
12-14
最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋 复制代码代码如下: <!doctype html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Document</title> <style type=”text/css”> .box > canvas { position: absolute; } </style> </head> <body> <canvas id=”layer1″
HTML5 Canvas的点击区域检测以及如何监听Canvas上各种图形的点击事件
細水、長流√的专栏
03-01 4668
作者：Anton Lavrenov你是否需要一个在Canvas画布上的任意图形的点击事件监听（译者注：类似于任意一个DOM元素的点击监听事件）？但是Canvas没有此类监听器的API。你只能在整个Canvas画布上进行事件监听，而不是在画布上的任意一个元素。我将描述2种方法来解决这个问题。注意！我将不会使用，因为现在（作者写文章时间为2017年）这个api是不稳定的，并且并没有被完整的支持。但是你可以了解下。让我们从简单的canvas画布图形开始。假设我们在一个页面上绘制了几个圆圈（circle）。
canvas画图 事件
tom_ke的专栏
05-25 1306
DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个元素，可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用
html5鼠标事件监听,HTML5 Canvas鼠标与键盘事件
weixin_39870150的博客
06-04 777
演示HTML5 Canvas鼠标事件，获取Canvas对象上的鼠标坐标，演示键盘事件通过键盘控制Canvas上对象移动。Canvas对象支持所有的JavaScript的鼠标事件，包括鼠标点击(MouseClick), 鼠标按下(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move)对Canvas添加鼠标事件方式有两种，一种方式是通过API来完成：// mouse...
小程序之坑 - 可移动/缩放canvas及如何判断canvas点击区域是否在标记的圆圈内
hanchengmei的博客
10-26 1319
canvas移动，缩放，点击canvas，判断是否在规定圆圈内
如何在Canvas上的图形/图像绑定事件监听的实现
09-16 1300
HTML中只能为元素/标签绑定监听函数； Canvas绘图中只有一个元素-canvas，每一个图形/图像都不是元素，不能直接进行事件绑定。 解决办法：“事件委托”——让canvas监听所有的事件，计算事件发生坐标点，是否处于某个图形/图像的范围内。 对于标准几何图形可以进行事件绑定； 对于不标准几何图形进行事件绑定非常麻烦。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
HTML 给canvas圆形添加监听事件
qq_39237554的博客
12-03 1796
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;me
Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器
MIKUScallion的专栏
03-03 1万+
由于Canvas的 ”忘记式“ 绘图机制（就是它没有维护一份绘制元素的列表）。 如果仅仅检测用户是否点击整个canvas元素，只需在canvas上注册事件就好。 如果是要分别检测canvas里绘制的不同元素的鼠标点击事件，则要用下面的做法，实现一个元素管理器。 一.原理分析 1.canvas元素能提供的一个api是，context.isPointInPath(x,y)，它可以判断参数的点是
canvas点击事件
05-27
Canvas 点击事件可以通过添加事件监听器实现。具体的步骤如下： 1. 获取 Canvas 元素并保存到变量中。 ```javascript const canvas = document.getElementById('myCanvas'); ``` 2. 添加 click 事件监听器。 ```javascript canvas.addEventListener('click', function(event) { // 在这里编写处理点击事件的代码 }); ``` 3. 在事件监听器中获取鼠标点击的位置。 ```javascript const x = event.clientX - canvas.offsetLeft; const y = event.clientY - canvas.offsetTop; ``` 4. 在事件监听器中处理点击事件。 ```javascript // 例如，可以在点击的位置绘制一个圆形 const context = canvas.getContext('2d'); context.beginPath(); context.arc(x, y, 10, 0, 2 * Math.PI); context.fill(); ``` 以上是一个简单的示例，你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值