最近有一个需求说是需要换颜色。
最后其实给我拒绝了，因为我说很难实现。但是心中还是上心了。
下面是替换颜色的方法。效果还行吧。一般般
主要代码还是copy别人的。这里就写一下，当记录
1、canvas的getImageData所生成的组成
根据循环可以得出
组成是ARGB格式，第一个是透明度，后续rgba
2、得出的循环需要按4的倍数进行循环，否则至少是卡死的地步
for (var j = 0; j < pdatalength; j+=4) { if (pdata[j] === 95) pdata[j] = colorArr[0]; if (pdata[j - 1] === 170) pdata[j-1] = colorArr[1]; if (pdata[j - 2j] === 129) pdata[j-2] = colorArr[2]; } 复制代码
3、注意替换颜色应该是倒序
所以0,1,2,3的顺序
替换的rgb颜色应该是3,2,1
得到数组rgb：data[i],data[i-1],data[2]
替换方式看上面代码
4、完整代码格式
<!DOCTYPE html> <html> <style> #btn { width: 100px; height: 50px; background: coral; position: fixed; top: 0; } </style> <head> <script type="text/javascript"> var c, ctx,myImage; function displayImage() { myImage = new Image(); myImagesrc = "1719ebbc83be39f0webpjpg"; c = documentgetElementById("myCanvas"); if (cgetContext) { ctx = cgetContext("2d"); myImageonload = function() { ctxdrawImage(myImage, 0, 0); } } } //colorArr 替换后的颜色 // 替换前的颜色 function getColorData(colorArr, color2) { imageD = ctxgetImageData(0, 0, myImagewidth, myImageheight); var pdata = imageDdata; for (var j = 0; j < pdatalength; j+=4) { if (pdata[j] === color2[0]) pdata[j] = colorArr[0]; if (pdata[j + 1] === color2[1]) pdata[j + 1] = colorArr[1]; if (pdata[j + 2] === color2[2]) pdata[j + 2] = colorArr[2]; } ctxputImageData(imageD, 0, 0); } function colorChange() { // rgb颜色 getColorData([102, 51, 153], [95, 170, 129]); } </script> </head> <body onload="displayImage()"> <p>原始：</p> <img id="myPhoto" src="1719ebbc83be39f0webpjpg"> <p>Canvas：</p> <canvas id="myCanvas" width="200" height="200"></canvas> <button id="btn" onclick="colorChange()">变颜色啦！</button> </body> </html>
微信小程序动态显示和隐藏某个控件新手教程。在小程序的开发过程中，经常需要用到隐藏某个控件这种情况。
因为项目原本是需要将两个canvas切换，但是小程序的canvas支持的功能实在是少，本来就jQuery mobile或者将canvas转为就可以很容易实现滑动效果，但是都不支持，最后只能是做一个canvas，需要时显示，不需要时隐藏。
实现方法：
logswxml
123456
<view> <button bindtap="onChangeShowState">{{showView'Click To Check IdleReason':'Click To Check MTStatus'}}</button> </view> <view class="{{showView'bright789_view_show':'bright789_view_hide'}}"> <canvas canvas-id="pieCanvas1" ></canvas> </view>
logsjs
123456789101112131415
Page({ data: { showView: true }, onLoad: function (options) { // 生命周期函数--监听页面加载 showView: (optionsshowView == "true" true : false) } , onChangeShowState: function () { var that = this; thatsetData({ showView: (!thatdatashowView) }) }, })
logswxss
123456
bright789_view_hide{ display: none; } bright789_view_show{ display: block; }
从上面三个页面的文件可以很明显看出逻辑：logswxml的onChangeShowState按钮会在logsjs中触发一个事件，它会改变showView的值，而在logswxml中会根据showView的值确定画布canvas的class属性，而在logswxss中具体再设置两个class属性哪个是否显示
在微信小程序中设置自定义标题后，自定义标题并不能覆盖住canvas
小程序中 canvas、textearea、video等组件使用原生渲染，层级最高，无法通过z-idnex设置进行控制
1在微信小程序的社区也有类型的问题，官方给出的解决办法是将其进行隐藏，在需要时进行显示。
2介于我的问题是canvas显示问题，并且canvas不是实时渲染，可以将canvas在渲染后变成进行展示：wxcanvasToTempFilePath
如果可以用css动画进行解决，也是可以的
如何将canvas所画的图形清除或者删除掉？
答：楼主的问题是怎么解决的？我最近也遇到了同样的问题我想画扇形，每隔1S更新一下扇形的面积不知道该怎么样更新？请指导一下 先谢谢你了
如何清除canvas上面画的所有图形
答：clearRect函数 contextclearRect(0,0,300,300); 第一个参数：x的起始位置 第二个参数：y的起始位置 第三个参数：清除的宽度 第四个参数：清除的高度
java 中如何将画在画布上的图形清除（从canvas类继
答：清除方法一、 在的位置接着画一个矩形覆盖这个，并且把颜色设置成和背景色一样就OK了！ 代码如下： contextfillStyle="ffffff";//白色为例子； contextfillRect(400,100,400,100); 注意，上面的代码要放在imageObjonload里面才有效果
<!DOCTYPE html>
<html>
<head>
</head>
<body align="center">
<canvas id="drawing" width="400" height="400">A drawing of someing!</canvas>
<script type="text/javascript">
//绘制饼图
var drawCircle = function(canvasId, data_arr, color_arr){
var drawing = documentgetElementById(canvasId);
if(drawinggetContext) {
var context = drawinggetContext('2d');
var radius = drawingheight/2 -20,//半径
ox = radius +20, oy = radius +20;//圆心
var width = 30, height = 10, //图例宽高
posX = ox 2 +20, posY = 30;//图例位置
var textX = posX + width + 5, textY = posY + 10;//文本位置
var startAngle = 0, endAngle = 0;//起始、结束弧度
contextstrokeStyle = 'Purple';
contextlineWidth = 3;
contextstrokeRect(0, 0, drawingwidth, drawingheight);
for(var i=0, len=data_arrlength; i<len; i++) {
//绘制饼图
endAngle += data_arr[i] 2MathPI;
contextfillStyle = color_arr[i];
contextbeginPath();
contextmoveTo(ox, oy);
contextarc(ox, oy, radius, startAngle, endAngle, false);
contextclosePath();
contextfill();
startAngle = endAngle;
}
}
};
var init = function(){
var data_arr = [005, 025, 06, 01],
color_arr = ['#00FF21', '#FFAA00', '#00AABB', '#FF4400'];
drawCircle('drawing', data_arr, color_arr);
};
init();
</script>
</body>
</html>
Canvas 组件表示屏幕上一个空白矩形区域，应用程序可以在该区域内绘图，或者可以从该区域捕获用户的输入事件。
应用程序必须为 Canvas 类创建子类，以获得有用的功能（如创建自定义组件）。必须重写paint 方法，以便在 canvas 上执行自定义图形。
举例：
Paneladd(new MyCanvas());//往panel中添加画布canvas
class MyCanvas extends Canvas {//定义一个canvas
public MyCanvas () {
setBackground (ColorGRAY);//设置背景为灰色
setSize(300, 300);//定义canvs大小是300300
}
public void paint (Graphics g) {//画布的paint方法，
Graphics2D g2;
g2 = (Graphics2D) g;
g2drawString ("It is a custom canvas area", 70, 70);//屏幕输出该字符串
}
}
在微信小程序使用canvas绘制圆角矩形时，在Android出现变形、锯齿现象，而iOS正常。
根据小程序社区回复：使用ctxarc + ctxlineTo就能避免Android错误，Android只使用ctxarcTo不兼容！！！
解决方案：
参考文章： 微信小程序 canvas 绘图问题总结
公司提了压缩的需求，在网上查了些资料，用canvas实现了，但发现使用wxcanvasToTempFilePath如果只是打印地址然后点击地址查看，或者保存至相册再查看，拿到的就是正常的，但我如果要在压缩后的success回调中使用去做一些事情（比如编码wxgetFileSystemManager()readFile、上传至服务器wxrequest），拿到的就是空白的。
经过多次调试后发现，是这里的问题
这里需要设置的多一点。我之前设置的100，即100ms，可能因为上传至服务器是异步的，导致100ms内canvas没法完成加载 *** 作，生成的就是空白的。改成1000之后，有足够长的时间渲染，就不会出现空白的问题了。
以上就是关于求canvas小程序该效果，要求最终输出rgb值对象需要根据传入的rgb正确定位点的位置全部的内容，包括:求canvas小程序该效果，要求最终输出rgb值对象需要根据传入的rgb正确定位点的位置、开发微信小程序时，如何隐藏控件、微信小程序中 canvas 层级过高问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）