若是有人问我你的梦是什么,我会说:“买得起本身喜欢的东西,作本身喜欢的事,来场说走就走的旅行。带着父母去再拍一次婚纱照、一次属于他们的旅行 。要是喜欢的人也喜欢本身,那就太完美了,若是不合适,那也不会所以的损失生活质量,反而会由于花本身的钱,变得更加有底气,这可能就是努力的缘由吧。”javascript
学习画布以前要掌握javascript的基础知识php
●JavaScript的引 入css
●在HTML文档中引入JavaScript文件与引入CSS文件的方法相似,分为两种方式:html
●数据类型java
● JavaScript中有5种基本数据类型。web
●变量shell
● 在JavaScript中使用var进行局部变量的声明。canvas
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意为画布,现实生活中的画布是用来做画的, 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>
context.strokeRect(x,y,width,height);
context.fillRect(x,y,width,height);
在canvas中还有一个至关于橡皮擦的方法,使用它能够清除矩形内绘制的内容。
context.clearRect(x, y,width,height);
context.arc( x, y, radius , startAngle , endAngle , bAntiClockwise);
x,y:中心点 radius:半径长度 startAngle:开始弧度 endAngle :结束弧度 bAntiClockwise:是否逆时针(false:顺时针、true:逆时针)
●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中提供的有关图形绘制的方法还有不少,接下来介绍几个本项目涉及到的方法,具体以下。
案例:发红包才能看得照片
说明:当点击想看我时:圆圈会随机在画布上选择区域,你只能够看到一点点内容,当你点击收到红包就能够看到完整的照片,这种是营销中经常使用的方法。
思路:
发红包才能看得照片
①使用< 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(); }