canvas绘制圆形马赛克方法一

方法简介：
先绘制出所需马赛克部分矩形图片，在通过裁剪画布实现圆形图片，之后将圆形图片打上马赛克，最后在画布最底层绘制全部图片。
在图片上绘制圆形如图：

代码示例

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><style>.canvas1{position: absolute;left:0;top:0;left: 0;background: beige;}.cir{border:1px solid red;position: absolute;z-index: 10;/* border-radius: 50%; */}</style><script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script><meta charset="utf-8" />
</head><body>
<canvas id="canvas1" class="canvas1"></canvas>
<div>Canvas Demo</div>
<div id="output"></div>
<script type="text/javascript">var canvas1 = document.getElementById("canvas1");var ctx1 = canvas1.getContext("2d");var aImg = new Image();aImg.src = '460-259.jpg';aImg.onload = function(){canvas1.width = aImg.width;canvas1.height = aImg.height;ctx1.drawImage(this,0,0,aImg.width,aImg.height);}
/* 绘制圆形 */
$("#canvas1").mousedown(function (e) {var e = window.event || arguments[0];var initX = e.pageX;var initY = e.pageY;var targetE = e.target;var moveX = 0,moveY = 0;var clearX=0,clearY=0,clearW=0,clearH=0;$("body").append('<div class="cir"></div>')$(document).bind("mousemove",function(){var e = window.event || arguments[0];var x = e.pageX,y = e.pageY;moveX = Math.abs(x - initX);moveY = Math.abs(y - initY);$(".cir").css({left:initX -moveX+"px",top:initY -  moveY+"px",width:moveX * 2-2+"px", //-2 减去的绘制圆的边框（红色圆）height:moveY * 2-2+"px","border-radius":moveX+"px" + "/"+ moveY+"px"})}).on("mouseup",function(){$(document).unbind('mouseup'); // 解除按下事件$(document).unbind('mousemove'); // 解除按下事件$(".cir").remove()if(moveX>2 && moveY>2 ){ //有效绘制区域ctx1.beginPath();ctx1.clearRect(clearX,clearY,clearW,clearH)ctx1.ellipse(initX,initY,moveX,moveY,0,0,2*Math.PI);ctx1.stroke();draw(aImg,initX,initY,moveX,moveY);}})})/*x,y 圆心坐标（x,y）r1:圆水平半径r2：圆垂直半径*/function draw(obj,x,y,r1,r2){var oriW  = obj.width;var oriH = obj.height;ctx1.drawImage(obj,x-r1,y-r2,2*r1,2*r2,x-r1,y-r2,2*r1,2*r2); //裁剪圆大小的画面  (obj,x1,y1,w1,h1,x2,y2,w2,h2)  x2 = x1/w1*w2ctx1.globalCompositeOperation = 'destination-in'ctx1.save();ctx1.beginPath()ctx1.ellipse(x, y, r1, r2,0,0, 2 * Math.PI); // 从画布上裁剪出这个圆形  圆心(x,y) 水平半径r1，垂直半径r2ctx1.closePath()ctx1.fill()ctx1.clip();//裁剪ctx1.restore()//获取坐边图像的局部坐标的部分像素var oImgData = ctx1.getImageData(x-r1,y-r2,2*r1,2*r2);var w = oImgData.width;var h = oImgData.height;//马赛克的程度，数字越大越模糊var num = 4;//等分画布var stepW = w/num;var stepH = h/num;//这里是循环画布的像素点for(var i=0;i<stepH;i++){for(var j=0;j<stepW;j++){//获取一个小方格的随机颜色，这是小方格的随机位置获取的var color = getXY(oImgData,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));//这里是循环小方格的像素点，for(var k=0;k<num;k++){for(var l=0;l<num;l++){//设置小方格的颜色setXY(oImgData,j*num+l,i*num+k,color);}}}}ctx1.putImageData(oImgData,x-r1,y-r2);ctx1.globalCompositeOperation = 'destination-over'ctx1.drawImage(obj,0,0,oriW,oriH);}function getXY(obj,x,y){var w = obj.width;var h = obj.height;var d = obj.data;var color = [];color[0] =     obj.data[4*(y*w+x)];color[1] =     obj.data[4*(y*w+x)+1];color[2] =     obj.data[4*(y*w+x)+2];color[3] =     obj.data[4*(y*w+x)+3];return color;}function setXY(obj,x,y,color){var w = obj.width;var h = obj.height;var d = obj.data;obj.data[4*(y*w+x)] = color[0];obj.data[4*(y*w+x)+1] = color[1];obj.data[4*(y*w+x)+2] = color[2];obj.data[4*(y*w+x)+3] = color[3];}
</script>
</body>
</html>

canvas绘制圆形马赛克方法一相关推荐

canvas绘制圆形马赛克方法二
因某些项目需求:必须先绘制整出整个图片在打马赛克,"canvas绘制圆形马赛克方法一"中方式不能满足,故用以下方式实现: 方法简介: 先绘制出整个图片在画布a上,在将马赛克数据co ...
绘制圆形，方法一（Canvas，drawOval）
这个方法挺有趣的. 1: private int mRadius=6: 2: /*假设有一个GeoPoint gp,存储着卫星坐标对*/ 3: 4: /*设置笔刷*/ 5: Paint paint = ...
canvas绘制圆形
canvas绘制圆形的思路: 1.创建路径 XXX.beginpath(); 2.创建圆形的路径: 3.关闭路径:XXX.closepath(); 路径不关闭也能绘制出图形 4.设定绘制样式. 创建圆 ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
如何在html5中实现多圆,JavaScript与html5如何实现canvas绘制圆形图案的方法介绍
这篇文章主要介绍了js+html5实现canvas绘制圆形图案的方法,涉及html5图形绘制的基础技巧,需要的朋友可以参考下本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大 ...
html5 canvas绘制圆形印章，以及与页面交互
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 < ...
android绘制环形进度_Android使用Canvas绘制圆形进度条效果
前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas ...
如何使用canvas绘制圆形
Canvas是HTML5中新增的元素,专门用来绘制图形,相当于在页面中放了一张"画布",可以在里面绘制图形,但是不是指用鼠标画图,而是需要用Javascript编写需要绘制的图形的 ...
H5 Canvas绘制圆形进度条动画效果
效果如图效果比较简单 html结构部分 <canvas id="canvas" width="110" height="110"&g ...

canvas绘制圆形马赛克方法一

canvas绘制圆形马赛克方法一相关推荐

最新文章

热门文章