Canvas笔记二

canvas 绘制图片

Canvas{
id: canvas
onImageLoaded: requestPaint()   // 加载图片后，重绘图片
Compent.onCompleted:{
loadImage("qrc:/Tux.png")
}

onPaint:{
    var ctx = getContext("2d")
   ctx.fillStyle = "white"  // 保存用于填充形状的当前样式。样式可以是包含CSS颜色的字符串、CanvasGradient或CanvasPattern对象。
   ctx.fillRect(0,0,width,height)  //使用fillStyle绘制指定的矩形区域。
ctx.strokeStyle = "black"
ctx.lineWidth = 2

ctx.beginPath(); // 将当前路径重置为新路径。
ctx.moveTo(50,50)
ctx.lineTo(100,100)
ctx.closePath();  // 通过在子路径的开始处绘制一条线来关闭当前子路径，并自动启动新路径。新路径的当前点是前一个子路径的第一个点
ctx.stroke(); //使用当前笔划样式笔划子路径。


ctx.dramImage("qrc:/Tux.png",200,200,50,50)
}

 

 

使用canvas 写字

ctx.beginPath();
ctx.text("Stroke Text on Path" , 10 , 150);
ctx.stroke(); //设置 ↑ 的text风格为stroke

ctx.strokeText("Stroke Text" , 10 , 200);