canvas实现橡皮擦

抽奖的时候后见过，类似于刮刮乐。

相关知识点：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);
- 参数：圆的中心的 x 坐标，圆的中心的 y 坐标，圆的半径，起始角，以弧度计（弧的圆形的三点钟位置是 0 度），结束角，以弧度计，可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
context.clip(); 方法从原始画布中剪切任意形状和尺寸。
- 提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
入栈save() 与出栈restore() 必须成对出现。

<canvas width="600" height="400"></canvas>
<script>// 先把画布搞出来var canvas=document.querySelector("canvas");var ctx=canvas.getContext("2d");ctx.fillStyle="#000";ctx.fillRect(0,0,canvas.width,canvas.height);// 再把下面的图片加载进来var img=new Image();img.src="./img/sound.jpg";img.addEventListener("load",loadHandler);function loadHandler(e){canvas.addEventListener("mousemove",mouseHandler);// 不能放在这儿，会首先加载图片的// ctx.drawImage(img,0,0,canvas.width,canvas.height);}function mouseHandler(e){ctx.save();//入栈ctx.beginPath();//设置圆形，用来作为刮刮乐的下笔形状ctx.arc(e.offsetX,e.offsetY,10,0,Math.PI/180*360);ctx.clip();//剪切ctx.drawImage(img,0,0,canvas.width,canvas.height);ctx.restore();//出栈}
</script>

canvas实现橡皮擦相关推荐

java 橡皮擦_js canvas实现橡皮擦效果
本文实例为大家分享了canvas实现橡皮擦效果的具体代码,供大家参考,具体内容如下 html部分 My Canvas 0.1 html,body,div,img{ margin:0; padding: ...
java做橡皮擦效果_顶风作案，html5 canvas实现橡皮擦功能，擦了就知道有惊喜了...
2.[代码][JavaScript]代码 //通过修改globalCompositeOperation来达到擦除的效果 function tapClip(){ var hastouch = " ...
HTML5 canvas组件
canvas简介 canvas标签是用来绘制图像的 canvas本身没有绘画的能力,仅仅是图形的容器,相当于一块画板必须要使用脚本完成绘制:JS canvas绘画 <!DOCTYPE html ...
用canvas给自己的博客园加背景（二）
canvas入门(二) 前一篇大概介绍了canvas绘图的一些基础API,本文来介绍动画的部分,canvas最关键的函数是requestAnimationFrame(callback). 注:本文面向 ...
使用fabric.js简简单单实现一个画板
什么是fabric fabric是一个功能强大的JavaScript库,运行在HTML5 canvas上.fabric为canvas提供了一个交互式对象模型,以及一个svg-to-canvas解析器. ...
2015.4.25-2015.5.1 字符串去重，比例圆设计，中奖机和canvas橡皮擦效果等
1.字符串去重,html模板取值 2.javascript正则表达式之$1...$9 3.jquery插件 4.返回上一页并刷新解决方法: <a href ="javascript: ...
java做橡皮擦效果_HTML5 canvas橡皮擦擦拭效果
这是一款HTML5 canvas橡皮擦擦拭效果.该效果通过canvas来制作遮罩层和擦拭用的橡皮擦,用户可以通过移动鼠标来移除遮罩层,效果非常炫酷. 因为发代码有时会排版混乱,所以先发图演示了.源码已 ...
基于canvas剪辑区域功能实现橡皮擦效果
这篇文章主要介绍了基于canvas剪辑区域功能实现橡皮擦效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下这是基础结构没什么好说的 ?<!DOCTYPE html> <htm ...
使用 canvas 画矩形，实现橡皮擦功能
在画图之前,需要了解「画布的坐标系」,它的左上角坐标为(0,0),为原点,一图胜前言,关于坐标系的深入理解,看今天的的第二篇文章: canvas 只提供了两种绘制图形的 API,一种是矩形,另一种是绘 ...
巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存
canvas 是HTML5的元素,使用JavaScript 在网页上绘制图像. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 而如果想实现画笔在画板涂画画笔在图片上涂画,橡皮擦 ...

canvas实现橡皮擦

抽奖的时候后见过，类似于刮刮乐。

canvas实现橡皮擦相关推荐

最新文章

热门文章