js canvas实现圆角图片
本文实例为大家分享了js canvas实现圆角图片的具体代码，供大家参考，具体内容如下
圆角图片的代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background: rgba(199,237,204,1)">
<div style="display:flex; flex-direction: row">
<!--通过style方式为canvas设置宽高在火狐浏览器上导致绘制内容纵向拉伸。。。-->
<canvas id="drawing" width="400px" height="400px">canvas to draw</canvas>
<pre id="container" style="margin: 10px"/>
<img src=//zsrimg.ikafan.com/file_images/article/202109/202191115608734.jpg>
</div>
</body>
<script type="text/javascript">
window.οnlοad=function () {
var drawing = document.getElementById('drawing');
if (drawing.getContext) {
print('support')
addRoundRectFunc();
var context = drawing.getContext('2d');
draw(context);
} else {
print('not ')
}
}
function draw(context) {
context.fillStyle = 'red';
var image = document.images[0];
context.roundRect(0,0,image.width/2,image.height/2,30,true)
context.globalCompositeOperation='source-in';
context.drawImage(image, 0, 0, image.width / 2, image.height / 2)
// toImage();
}
function addRoundRectFunc() {
CanvasRenderingContext2D.prototype.roundRect =
function (x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined") {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
this.beginPath();
this.moveTo(x + radius, y);
this.lineTo(x + width - radius, y);
this.quadraticCurveTo(x + width, y, x + width, y + radius);
this.lineTo(x + width, y + height - radius);
this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
this.lineTo(x + radius, y + height);
this.quadraticCurveTo(x, y + height, x, y + height - radius);
this.lineTo(x, y + radius);
this.quadraticCurveTo(x, y, x + radius, y);
this.closePath();
if (stroke) {
this.stroke();
}
if (fill) {
this.fill();
}
};
}
function toImage() {
var imageUri = drawing.toDataURL('image/png');
var imageTag = document.createElement('img');
imageTag.style = 'margin:10px;width:200px;height:200px'
imageTag.src = imageUri;
document.body.appendChild(imageTag)
}
function print(txt) {
document.getElementById("container").innerHTML += ('\n') + txt;
}
document.body.onclick = function () {
window.location.reload()
}
console.log = print;
</script>
</html>
效果图：
补充一段使用小代码：canvas 生成圆角图片（头像等）
circleImg(ctx, img, x, y, r) {
ctx.save();
var d =2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
用js实现CSS圆角生成更新
用js生成任意圆角,下一步就是加入直角导角,圆角导外,外圆角导个,还有边框处理,阴影生成,还有柔化处理都是以后的重点和难点. 中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺 makeroalj("modul","con
-
用js实现的抽象CSS圆角效果!!
大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: <html> <head> <title>css圆角效果</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style type="text/css"> div.RoundedCorne
-
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
本文实例讲述了JS+CSS实现可拖拽的漂亮圆角特效弹出层的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
-
js canvas实现圆角图片
本文实例为大家分享了js canvas实现圆角图片的具体代码,供大家参考,具体内容如下 圆角图片的代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background: rgba(199,237,
-
js+canvas实现图片格式webp/png/jpeg在线转换
功能需求: 我们在网页中上传一张图片,选择不同的格式,将该图片转换为对应的格式. 实现思路: 实现这样的功能,使用后端语言[php,java等]可以很容易的完成.但是如果只在前端如何完成呢? 1.通过input上传图片,使用FileReader将文件读取到内存中. 2.将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,如:"image/webp","image/jpeg","image/png". 3.最后将
-
JS Canvas接口和动画效果大全
概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript通过操作它的 API,在上面生成图像.它的底层是一个个像素,基本上<canvas>是一个可以用JavaScript操作的位图(bitmap). 它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像. 使用 Canvas API 之前,需要在网页里面新建一个<canvas>元素. <canvas id
-
Android 实现圆角图片的简单实例
Android 实现圆角图片的简单实例 实现效果图: 本来想在网上找个圆角的例子看一看,不尽人意啊,基本都是官方的Demo的那张原理图,稍后会贴出.于是自己自定义了个View,实现图片的圆角以及圆形效果.效果图: Android 圆角图片的实现形式,包括用第三方.也有系统的.比如makeramen:roundedimageview,系统的cardview , glide .fresco . compile 'com.android.support:appcompat-v7:24.0.0' com
-
js实现按钮控制图片360度翻转特效的方法
本文实例讲述了js实现按钮控制图片360度翻转特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现按钮控制图片360度翻转特效</title> <body> <script language="javascript"> var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var o
-
js实现带圆角的两级导航菜单效果代码
本文实例讲述了js实现带圆角的两级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用JS做的圆角菜单,支持两级菜单显示,本人比较喜欢的风格,修改使用方便,新手也能上手快.使用有几张圆角图片来修饰了菜单,喜欢的朋友可以下载代码留作收藏使用.真心不错的蓝色导航条代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cicle-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC
-
用canvas 实现个图片三角化（LOW POLY）效果
之前无意中看到Ovilia 用threejs做了个LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下. 我是没怎么用过threejs,所以就直接用canvas的2d绘图API来做,因为感觉似乎这效果也用不上threejs. 直接上demo先:http://whxaxes.github.io/canvas-test/src/Funny-demo/lowpoly/index.html(也可以在移动端看,不过因为计算量比较大,移动设备计算起来会比PC要多花些时间.
-
Android关于Glide的使用(高斯模糊、加载监听、圆角图片)
高斯模糊.加载监听.圆角图片这些相信大家都很熟悉,那如何实现这些效果,请大家参考本文进行学习. 1.引用 compile 'com.github.bumptech.glide:glide:3.7.0' 2.加载图片 2.1 基本加载 Glide.with(context) .load(url) .into(imageView); 2.2 设置加载中和加载失败的情况 Glide.with(context) .load(url) .placeholder(R.drawable.loa
-
Android中实现圆角图片的几种方法
Android中实现圆角图片有多种姿势,不知你解锁了几种? 方法一:setXfermode法 此种方式就是再new一个相同尺寸的bitmap,然后使用paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));先画圆角矩形,再画原始bitmap,然后就得到了一个圆角的bitmap了. public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, float roundPx) { Bitmap
-
Android中Glide加载圆形图片和圆角图片实例代码
一.简介: 介绍两种使用 BitmapTransformation 来实现 Glide 加载圆形图片和圆角图片的方法.Glide 并不能直接支持 Round Pictures ,需要使用 BitmapTransformation 来进行处理. 二.网上的实现方式 这里介绍下网上常见的方式和使用 RoundedBitmapDrawable 两种方法,本质上是差不多的: 使用 Canvas 和 Paint 来绘制 使用 Android.support.v4.graphics.drawable.Rou