应用程序必须为 Canvas 类创建子类，以获得有用的功能（如创建自定义组件）。必须重写paint 方法，以便在 canvas 上执行自定义宴岩图形。
举例：
Panel.add(new MyCanvas())//往panel中添加画布canvas
class MyCanvas extends Canvas {//定义一个canvas
public MyCanvas () {
setBackground (Color.GRAY)//设置背景为灰色
setSize(300, 300)//定义canvs大小是300*300
}
public void paint (Graphics g) {//姿雀画布的paint方法，
Graphics2D g2
g2 = (Graphics2D) g
g2.drawString ("It is a custom canvas area", 70, 70)//屏幕输出该字符串
}
}
最近有一个需求说是需要换图片颜色。最后其实给我拒绝了，因为我说很难实现。但是心中还是上心了。
下面是替换颜色的方法。效果还行吧旦冲粗。一般般
主要代码还是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>
canvas弧形进度条，实现如图。
canvas重绘分数，如rgba底色会覆盖逐渐变白，暂时十六进制。
canvas小程序，如最外view存在 fixed等定位，会飘，激宴截取用替换的图旁正片代替。
起始位置为下图中的0.75-0.25，3/4圆270度。
ps：阻止canvas随页面滚动(已解决明启银，可不看）
https://www.jianshu.com/p/c356ce38fd58
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）