1、首穗亩先架构一下网页的样式，既然是举例，那么就简单写入四个span用来做我们的文字存放，和之后的对比。
2、我们首先用最初的css方式来给这些文字添加样式。直接用color这个属性就可以控制文字的颜色。就可以看到生效之后的效果。
3、但是如果有很多不同的，颜色组成还可以这么写嘛，答案肯定是不行的。那么我们就用js来控制首先写一个script标签，里面定义一个数组colors，存放值也就是文字，而下标就可用来表袭缺示颜色。
4、然后我们用一个循环来将，下标和分猜禅森别存放到span标签中去。然后就会将三个不同的span写入页面
最近有一个需求说是需要换图片颜色。最后其实给我拒绝了，因为我说很难实现。但是心中还是上心了。
下面是替换颜色的方法。效果还行吧旦冲粗。一般般
主要代码还是copy别人的。这里就写一下，当记录
1、canvas的getImageData所生成的图片组成
根据循环可以得出
图片组成是ARGB格式，第一个是透明度，后续rgba
2、得出的图片循环需要按4的倍数进行循环，否则至少是卡死的地步
for (var j = 0j <pdata.lengthj+=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: 100pxheight: 50pxbackground: coralposition: fixedtop: 0 } </style><head> <script type="text/javascript">var c, ctx,myImagefunction displayImage() { myImage = new Image() myImage.src = "1719ebbc83be39f0.webp.jpg" c = document.getElementById("myCanvas") if (c.getContext) { ctx = c.getContext("2d")myImage.onload = function() { ctx.drawImage(myImage, 0, 0)} } } //colorArr 替换后的颜色 // 替换前的颜色 function getColorData(colorArr, color2) { imageD = ctx.getImageData(0, 0, myImage.width, myImage.height) var pdata = imageD.data for (var j = 0j <pdata.lengthj+=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] } ctx.putImageData(imageD, 0, 0)} function colorChange() { // rgb颜色 getColorData([102, 51, 153], [95, 170, 129])} <判源/script></head><body onload="displayImage()"><p>原始图片：</p><img id="myPhoto" src="1719ebbc83be39f0.webp.jpg"><p>Canvas图片：</p><canvas id="myCanvas" width="200" height="200"></canvas><button id="btn" onclick="colorChange()">变颜色啦！</button></body></html>
标签数据在data中定义， 因为还要点击高亮， 所以同时给个状态值
页面循环渲染出来
点击事件bindtap='select',
绑定class: class="{{item.isSelect?'active':'select'}}", 点击的时候改变类名
自定义dataset :data-index="{{index}}"
样式效果
JS部份
到这儿, 高亮的就已经写好了. 怎么取值呢? 下面还有一个保存按钮. 给保存按钮一个点击事件:
1.定义一个空数据
2.遍历上边的data里的selectall数好闭组亩袜郑, 传两个参数, v是所有标签的状态(比如isSelect:false或isSelect:true), i是下迅颂标.
看打印结果
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）