canvas 实现图片局部模糊_Canvas绘制图片模糊

canvas是html5的新标签，是个可以绘制图形的画布，画布的默认大小为300x150。在自定义绘制画布大小的时候有注意的问题，就是用样式来设置高度和宽度的时候比如

您的浏览器不支持H5画布属性

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.arc(120, 75, 20, 0, Math.PI * 2, false);

ctx.fillStyle = "#000";

ctx.fill();

他等于是把整个画布进行了拉伸，这样绘制出来的图形是模糊的。

可以看到圆的边缘是模糊的，而且变成了椭圆？这是因为画布还是默认的大小宽300px，高150px，但是用style强行把画布拉伸到了1000x600。宽度扩大3.33倍，高度扩大4倍，所以变成了椭圆。宽改为1200就是圆了。

所以不能在样式里面设置大小，应该用canvas自带的width和height属性来设置高度。看下面的代码。注意画圆的参数也改变了

您的浏览器不支持H5画布属性

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.arc(500, 300, 200, 0, Math.PI * 2, false);

ctx.fillStyle = "#000";

ctx.fill();

所以设置画布的大小是用canvas自带的width和height属性，才是画布真正的大小，网上有方法可以解决，但是我没去试，因为感觉比较麻烦，还不如直接就是以后就是给固定的大小。有人说这样子自定义怎么办，那简单，套个div然后在js获取宽度或者获取屏幕的宽高然后设置canvas的值就好了。代码如下。

您的浏览器不支持H5画布属性

var canvas = document.getElementById("canvas");

var canvas_size = document.getElementById("canvas_size");//获取div

var ctx = canvas.getContext("2d");

canvas.width = canvas_size.offsetWidth;//设置宽

canvas.height = canvas_size.offsetHeight;//设置高

ctx.arc(500, 300, 200, 0, Math.PI * 2, false);

ctx.fillStyle = "#000";

ctx.fill();

结果和上面的图是一样的，各位可以自己试一下。

总结

canvas的宽高要用自带的width和height来写才是真正的画布大小，您的浏览器不支持H5画布属性,自适应用js来设置。

canvas 实现图片局部模糊_Canvas绘制图片模糊相关推荐

canvas 边界模糊_Canvas绘制线条模糊的解决方案
标签: 前段时间,做一个跨平台app项目,需要绘制分时图和K线图.找了很多开源的js的图表库,包括echarts.highcharts等等,都不是很满意,原因有2: 1.太臃肿,我实际上只要一个分时和 ...
canvas换图时候会闪烁_Canvas实现图片上标注、缩放、移动和保存历史状态，纯干货（附CSS 3变化公式）...
(给前端大学加星标,提升前端技能.) 作者:zhcxk1998 https://juejin.im/user/5d4304bdf265da03d15531dc 哈哈哈俺又来啦,这次带来的是canvas ...
canva画图图片居中裁剪_Canvas裁剪图片（截选框可拖拽）
利用Canvas实现图片裁剪效果图实现思路打开图片并将图片绘制到canvas中: 利用canvas的drawImage()函数来裁剪图片: 将canvas转化为Image即可. HTML代码: ...
html5图片看不见,html5 绘制图片 drawImage
要在绘图上下文中绘制图片,可以使用 drawImage 方法.该方法有三种不同的参数:  drawImage(image,dx,dy)  drawImage(image,dx,dy,dw,dh) ...
小程序 canvas 绘制图片
canvas绘制图片绘制图片的问题 html 绘制图片的问题 1.canvas不能绘制网络图片需要转换成本地图片进行使用 2.多张图片绘制需要调用 img.onload,进行嵌套绘制 html &l ...
高清屏下canvas绘制文字模糊
在浏览器的 window 对象中有一个 devicePixelRatio的属性,该属性表示了屏幕的设备像素比,即用几个(通常是2个)像素点宽度来渲染1个像素. 举例来说,假设devicePixelRa ...
H5canvas(渐变，绘制图片和视频，画布变换，制作马赛克)
绘制渐变前言绘制一条线段让这个线段的宽度是10 颜色是蓝色 var canvas = document.getElementById('myCanvas'); var cxt = canvas. ...
android音频开发6,Android 音视频开发(一) : 通过三种方式绘制图片
想要逐步入门音视频开发,就需要一步步的去学习整理,并积累.本文是音视频开发积累的第一篇. 对应的要学习的内容是:在 Android 平台绘制一张图片,使用至少 3 种不同的 API,ImageView ...
安卓音视频开发（1）—— 三种方式绘制图片
作为应届生,刚入职公司,现在想从零开始学习一个全新的领域--音视频开发,仅此记录一下. ImageView绘制图片这种常规的绘制图片方式,简单粗暴. String pathName = Enviro ...
iOS绘制图片与文字
2019独角兽企业重金招聘Python工程师标准>>> #####绘制图片与文字 #####1.绘制图片,直接代码说明加载图片 #pragma mark - 小黄人 -(void) ...

canvas 实现图片局部模糊_Canvas绘制图片模糊

canvas 实现图片局部模糊_Canvas绘制图片模糊相关推荐

最新文章

热门文章