前端H5笔记---五、javascript基础+canvas画布

如果有人问我你的梦是什么，我会说：“买得起自己喜欢的东西，做自己喜欢的事，来场说走就走的旅行。带着父母去再拍一次婚纱照、一次属于他们的旅行。要是喜欢的人也喜欢自己，那就太完美了，如果不合适，那也不会因此的损失生活质量，反而会因为花自己的钱，变得更加有底气，这可能就是努力的原因吧。”

学习画布之前要掌握javascript的基础知识

●JavaScript的引入

●在HTML文档中引入JavaScript文件与引入CSS文件的方法类似,分为两种方式:

●数据类型

● JavaScript中有5种基本数据类型。

●变量

● 在JavaScript中使用var进行局部变量的声明。

var str="变量名";
var num=1.5;
age=23;
var str=new String;
var cars=new Array("A","B","C);//数组

JavaScript中，“new” 关键字用于声明变量,所有的变量均为对象，声明了一个变量时,就创建了一个新的对象。

●函数

●函数( function )也可以叫做方法,是将- -些代码组织在一起,形成一个用于完成某个具体功能的代码块,在需要时可以进行重复调用。

● 对象

●在JavaScript中,对象是拥有属性和方法的数据。属性是对象相关的值,方法是对象可以执行的动作。

●事件处理

● 采用事件驱动是JavaScript语言的一个最基本特征,所谓的事件是指用户在访问页面时执行的操作,常用的事件类型如右表所示。

●事件处理

●另外事件有很多属性,常用的事件属性如下表所示。

●JavaScript HTML DOM

●DOM的全称为文档对象模型( Document Object Model )。当网页被加载时,浏览器会将HTMLDOM模型被构造为对象的树。

●通过JavaScript来创建动态的HTML。主要表现在4个方面。

●要想操作HTML元素及其属性,首先应该获得这个元素.对象, document对象的常用获取HTML元素对象的方法如下表所示。

●getBoundingClientRect()方法
一getBoundingClientRect()方法用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置, 或者说一个Element元素的座标现在已经是一个W3C标准。
— 该访法返回一个Object对象,该对象有6个属性: top、left、 right 、bottom、width、 height ,具体应用如下所示。

初识canvas

canvas意为画布,现实生活中的画布是用来作画的, HTML5中的canvas与之类似,我们可以称它为"网页中的画布”有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。
●创建画布

●HTML5中提供了标签,使用标签可以在网页中创建一个矩形区域的画布。

画布本身不具有绘制功能,可以通过脚本语言( -般为JavaScript )操作绘制图形的API进行绘制操作。可以使用getElementByld()方法获取画布对象:

●准备画笔

●有了画布之后,要开始作画需要准备- -只画笔,这只画笔就是context对象,该对象可以使用JavaScript脚本获得。

●座标和起点

●接下来需要设置上下文开始的绘制点,也就是“从哪里开始画”

●绘制线条

●lineTo()方法用于定义从"x,y" 的位置绘制- 条直线到起点或上一个线头点。

●路径

●绘制直线确定了起始点和线头点后,便形成了-条绘制路径,如果复杂路径绘制必须使用路径开始和结束。

●描边和填充

●在canvas图形绘制中 ,路径只是草稿,真正绘制线必须执行stroke()方法根据路径进行描边,还可以使用fill()方法进行图形的填充。

使用canvas绘制图形的基本步骤：
a) 创建画布：< canvas>< /canvas>
b) 准备画笔（获取上下文对象）：canvas.getContext(‘2d’);
c) 开始路径规划：context.beginPath();
d)移动起始点：context.moveTo(x, y);
e) 绘制线(矩形、圆形、图片…) ：context.lineTo(x, y);
f) 闭合路径：context.closePath();
g) 绘制描边：context.stroke();

案例：网页涂鸦板
效果：这画工也太low了，大家将就看一下

思路

①该涂鸦板要在屏幕中间显示,所以< canvas>标签可以嵌套在< center>标签中。
②编写JavaScript代码,首先要创建画布、准备画笔,并粗为画布设置宽高和边框;然后将鼠标指针看成画笔,当鼠标按下触发onmousedown事件时,使用moveTo()方法确定起点,当鼠标移动触发onmousemove事件时使用lineTo进行划线。
③获取鼠标的x , Y座标很简单,可以使用clientX和clientY来获取,当鼠标作用在一个对象上时,例如画布,就要考虑这个对象在浏览器窗口的位置,这时便要使用getBoundingClientRect0方法来获取canvas这个矩形对象,并且使用鼠标的座标减去这个矩形对象到浏览器左上角的距离。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CANVAS画布</title>
</head>
<body>
	<center>
		<canvas id="cavsElem">
			您的浏览器不支持canvas，请升级浏览器
		</canvas>
	</center>
	
	<script type="text/javascript">
		// 当前立即执行function
		(function(){
			// 初始化画布
			var canvas =document.getElementById('cavsElem');
			canvas.width= 900;
			canvas.height=600;
			canvas.style.border='1px solid #000';
			// 拿到画布对象
			var context=canvas.getContext('2d');

			// 在鼠标按下的时候开始绘制线条
			canvas.onmousedown =function(e){

				// 绘制直线的开始位置
				// alert(e.clientX+""+e.clientY);
				
				// 需要知道画布原点的座标
				var pos =canvas.getBoundingClientRect();
				// alert(pos.left+""+ pos.top);

				// 需要知道距离画布原点的座标
				// alert((e.clientX-pos.left)+":"+(e.clientY-pos.top));

				context.beginPath();
				context.moveTo((e.clientX-pos.left),(e.clientY-pos.top));

				// 监听鼠标移动的事件
				canvas.onmousemove= function(e){
					console.log((e.clientX-pos.left),(e.clientY-pos.top));

					// 不停地绘制线条
				context.lineTo((e.clientX-pos.left),(e.clientY-pos.top));
				// context.closePath();
				context.stroke();
				}
				canvas.onmouseup =function(){
					canvas.onmousemove =null;
				}
			}

		});

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

canvas绘制矩形和清除矩形

canvas中分别使用strokeRect()和fillRect()方法来绘制矩形边框和填充矩形。

context.strokeRect(x,y,width,height);
context.fillRect(x,y,width,height);

在canvas中还有一个相当于橡皮擦的方法,使用它可以清除矩形内绘制的内容。

context.clearRect(x, y,width,height);

canvas中使用arc()方法来绘制弧形和圆形。

context.arc( x, y, radius , startAngle , endAngle , bAntiClockwise);
x,y:中心点 radius：半径长度 startAngle:开始弧度 endAngle :结束弧度 bAntiClockwise:是否逆时针（false：顺时针、true：逆时针）

canvas绘制图片

●canvas中的绘制图片其实就是把一幅图放在画布上。

//绘制原图
context.drawlmage(image, dx, dy))
//缩放绘图
context.drawlmage(image, dx, dy, dWidth, dHeight )
//切片绘图
context.drawlmage(image ,sx,Sy, sWidth,sHeigh ,dx,dy,dWidth,dHeight)
-----image：图片来源 ----- dx,dy:目标中的座标 ----- dWidth，dHeight:目标的宽和高 -----sx,sy:Image在源中的起始座标 ----- sWidth,sHeight:源中图片的宽和高

canvas其他方法

●canvas中提供的有关图形绘制的方法还有很多,接下来介绍几个本项目涉及到的方法,具体如下。

案例：发红包才能看得照片

说明：当点击想看我时：圆圈会随机在画布上选择区域，你只可以看到一点点内容，当你点击收到红包就可以看到完整的照片，这种是营销中常用的方法。

思路：

发红包才能看得照片
①使用< a>标签做两个按钮,并为按钮设置样式。
②图片模糊的效果使用CSS滤镜"fiter: blur(px)”来实现,该属性可以实现近视眼忘了戴眼镜看东西的模糊效果
③各元素的定位都与< div>标签相对定位,需要注意,两个按钮要显示在最上层，Z-index值最大,可以设置为999，其次是< canvas>标签,最后是< img>标签,圆形可显示的部分是使用canvas绘制圆形来实现的。
2 HTML+CSS :
①绘制圆形: setRegion(Region) ,该方法中需要使用clip()方法剪切圆形区域,然后在圆形区域中绘制图片,就是图5-24中的圆形效果啦。
②绘制图片: draw(image)方法中需要调用setRegion(Region)方法,并使用dlearRect()方法清除上- -次绘制的圆形,保证只显示一个圆形区域。
③初始画布: initCanvas()方法中调用draw(image)方法。
④“想看我么” 按钮单击事件reset()方法,在该方法中调用initCanvas()方法,每次在不同的位置绘制圆形区域。
⑤“收到红包” 按钮单击事件show()方法,在该方法中调用draw(image)方法,使圆形半径大于画布,这时就可以绘制完整的图片了,也就是收到红包的效果。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>发红包</title>
	<link rel="stylesheet" type="text/css" href="css/photo.css"/>
</head>
<body>
	<div class="blurDiv">
		<img class="blurImg" src="pic.jpg" alt="#"/>
		<canvas id="mycanvas"></canvas>
		<a class="button" id="buttonreset" href="javascript:reset()">想看我</a>
		<a class="button" href="javascript:show()" id="buttonshow"> 收到红包</a>
	</div>
	<script type="text/javascript" src="js/photo.js"></script>
</body>
</html>

css代码：

.body{
	margin: 0;
	padding: 0;
}
.blurDiv{
	position: relative;
	width: 877px;
	height: 672px;
	margin:50px auto 0px;/*定义外边距：顶部50px，左右水平居中，距离底部0px*/
}
.blurDiv .blurImg{
	width: 877px;
	height: 672px;
	display: block;/*把行元素强制转换为块级元素*/
	filter: blur(20px);/*滤镜，设置模糊度*/
	-webkit-filter:blur(20px);/*webkit保留filter*/
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
.blurDiv #mycanvas{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
}

/*按钮*/
.blurDiv .button{
	display: block;
	width: 240px;
	height: 60px;
	border-radius: 5px;
	line-height: 60px;
	text-align: center;
	position: absolute;
	top: 105%;
	font-family: arial;
	font-size: 1.5em;/*相当于24px*/
	color: #fff;
	text-decoration: none;/*清除字体样式*/
	z-index:999;
}
.blurDiv #buttonreset{
	left: 7%;
	background-color: #c85814;
}
.blurDiv #buttonreset:hover{
	background-color: #ffb151;
}
.blurDiv #buttonshow{
	right:7%;
	background-color: #ff2f2e;
}
.blurDiv #buttonshow:hover{
	background-color: #ff596b;
}

js代码:

var canvasWidth =877;//声明画布的宽度
var canvasHeight =672;

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

canvas.width=canvasWidth;
canvas.height=canvasHeight;

var image = new Image();
image.src='pic.jpg';
image.οnlοad=function(){
	initCanvas();/*注：*/
}
var radius=50;

function initCanvas(){
	Region = {
		x:Math.random()*(canvasWidth-2*radius)+radius,
		y:Math.random()*(canvasHeight-2*radius)+radius,
		r:radius
	};
	draw();
}

function setRegion(){
	context.beginPath();
	context.arc(Region.x,Region.y,Region.r,2*Math.PI,false);
	context.clip();
}

function draw(){
	context.clearRect(0,0,canvas.width,canvas.height);
	context.save();
	setRegion();
	context.drawImage(image,0,0);
	context.restore();
}

// 单击事件reset方法，在该方法调用initCanvas()方法，每一次在不同的位置绘制圆形区域
function reset(){
	initCanvas();
}

function show(){
	Region.r=2*Math.max(canvas.width,canvas.height);
	draw();
}

前端H5笔记---五、javascript基础+canvas画布

初识canvas

canvas绘制矩形和清除矩形

canvas中使用arc()方法来绘制弧形和圆形。

canvas绘制图片

canvas其他方法

win11关闭自动检测病毒删文件

推薦最舒適配色方案

[Windows下搭建WordPress測試環境]

建站模板推薦

h5學習筆記——四、表單的應用

html5學習筆記 —— 二、文本類網頁設計

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結