一、文字阴影 / 发光
Canvas{id: root; width: 400; height: 400onPaint: //所有的绘制都在onPaint中{var ctx = getContext("2d") //获取上下文// 绘制带阴影的文本ctx.fillStyle = "#333" //设置填充颜色ctx.fillRect(0, 0, root.width, root.height) //实心矩形填充(起点的x,起点y,宽度,高度)ctx.shadowColor = "lightblue" //阴影颜色,描述阴影的代码要放在阴影对象的前面,否则不会生效ctx.shadowOffsetX = 2 //阴影向右偏移ctx.shadowOffsetY = 2 //阴影向下偏移ctx.shadowBlur = 5 //阴影模糊,数值越大越模糊,模糊面积也越大ctx.font = "bold 80px sans-serif"ctx.fillStyle = "lightgreen"ctx.fillText("Canvas!", 40, 200) //绘制的文本(String,x,y)}}
二、显示图片 / 裁剪图片
Canvas{width: root.width; height: root.heightonPaint: //所有的绘制都在onPaint中{var ctx = getContext("2d") //获取上下文ctx.drawImage("img/Z.jpg", 10, 10) //drawImage(图片路径,起点x, 起点y)/*+++++++++++++++++ 裁剪显示图片:只显示三角形中的部分 ++++++++++++++++++++*/ctx.save() //保存当前状态ctx.strokeStyle = "red" //填充颜色ctx.lineWidth = 2 //线条宽度ctx.beginPath() //开始绘制ctx.moveTo(310, 30) //绘制的起点ctx.lineTo(510, 30) //线条绘制的第2个位置ctx.lineTo(410, 150) //线条绘制的第3个位置ctx.closePath() //绘制完毕ctx.stroke() //渲染,否则图案不显示ctx.clip() //进入裁剪状态ctx.drawImage("img/Z.jpg", 310, 30)ctx.restore() //裁剪完成后重置状态,这样就能保证2张图片都能显示}//预加载图片,否则画布图片不显示Component.onCompleted:{loadImage("img/Z.jpg")}}