在使用canva绘图的时候,想填充颜色,一般的用法就是使用fill填充,stroke描边。但是我按照教程,使用填充失败。如果有哥们也遇到同样问题的话,我的解决方法给你们参考一下。
原代码
Canvas{
width:parent.width
height:parent.height
onPaint: {
var ctx = getContext("2d")
ctx.strokeStyle = "white"
ctx.reset();
ctx.beginPath()
ctx.beginPath();
ctx.moveTo(width*0.3, width*0.3)
ctx.lineTo(width/2, height*0.6)
ctx.lineTo(width*0.7, width*0.3)
ctx.closePath()
ctx.fillstyle = "red"
ctx.fill()
ctx.stroke()
}
}
解决方法就是把fill中的颜色改成hex格式
```javascript
Canvas{
width:parent.width
height:parent.height
onPaint: {
var ctx = getContext("2d")
ctx.fillStyle = "#FF0000"; //设置填充样式
ctx.strokeStyle = "#00FF00"; //设置轮廓样式
ctx.beginPath();
ctx.moveTo(width*0.3, width*0.3)
ctx.lineTo(width/2, height*0.6)
ctx.lineTo(width*0.7, width*0.3)
ctx.closePath(); //虽然我们只绘制了两条线段,但是closePath会closePath,仍然是一个3角形
ctx.stroke(); //描边。stroke不会自动closePath()
ctx.fill(); //填充
}
}