Canvas笔记一

一 　canvas 绘制矩形：

保存激活的图形上下文。如果画布已就绪，并且已成功调用getContext（），或者已使用支持的上下文类型设置contextType属性，则此属性将包含当前图形上下文，否则为空。

Canvas{   
        id: root
        width: 200  // 画板大小
        height: 200
        onPaint: {  // 重写绘制函数
            var ctx = getContext("2d")  // 获得2d上下文对象
            ctx.lineWidth = 4  // 设置画笔
            ctx.strokeStyle = "blue" // 保存用于形状周围线条的当前颜色或样式，样式可以是包含CSS颜色的字符串、CanvasGradient或CanvasPattern对象。忽略无效值。
            ctx.fillStyle = "steelblue"
            ctx.beginPath()   // 开始绘制路径
            ctx.moveTo(50,50)
            ctx.lineTo(150,50)
            ctx.lineTo(150,150)
            ctx.lineTo(150,150)
            ctx.lineTo(50,150)
            ctx.closePath() //并结束路径
            ctx.fill()  // 填充路径
            ctx.stroke() //绘制边线
        }
    }

 二   Context2D QML Type方法：

object clearRect(real x, real y, real w, real h) 将画布上给定矩形中的所有像素清除为透明黑色。
object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)  将圆弧添加到位于圆心位于点（x，y）且半径为半径的圆的圆周上的当前子路径
object createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)  返回一个CanvasGradient对象，该对象表示沿圆锥体绘制的径向渐变，圆锥体由起点为（x0，y0）且半径为r0的起始圆和终点为（x1，y1）且半径为r1的圆给定

 

三  Canvas  

方法： 
requestPaint() 要求重新绘制整个可见区域。

 

四  雷达扫描效果图 

 Canvas
    {
        id: canvas
        anchors.fill: parent
        antialiasing: false
        property bool drawable: true;
        property bool first: true;
        property real r: Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
        property real r1:0;
        property real r2: r / 2;

        function clear()
        {
            first = true;
            r1 = 0;
            r2 = r / 2;
            var ctx = getContext("2d");
            ctx.clearRect(0, 0, width, height);
        }

        function drawLine(ctx, color, width, startX, startY, endX, endY)
        {
            ctx.strokeStyle = color;
            ctx.lineWidth = width;
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.closePath();
            ctx.stroke();
        }

        Timer
        {
            id: timer
            interval: 1000
            running: false
            repeat: true
            onTriggered: canvas.requestPaint();
        }

        onPaint:
        {
            var ctx = getContext("2d");
            ctx.fillStyle = "#10FFFFFF";  // 用一个接近透明的颜色来覆盖在上一帧绘制的内容之上，这里我用的颜色为 #10FFFFFF(ARGB)，
            ctx.fillRect(0, 0, width, height);

            for(var i = 0; i < width; i += 20)
                drawLine(ctx, "#7266fc", 0.5,i + 0.5, 0, i + 0.5, height);
            for(var j = 0; j < height; j += 20)
                drawLine(ctx, "#7266fc", 0.5, 0, j + 0.5, width, j + 0.5);

            if (drawable)
            {
                var halfW = width / 2;
                var halfH = height / 2;  //  获取中心点
                console.log("halfw",halfW)
                console.log("halfH",halfH)
                console.log("r1",r1)
                console.log("r2",r2)
                ctx.lineWidth = 1;
                ctx.strokeStyle = "#72d6fc";
                for(var k = 0; k < 5; k += 0.5)
                {
                    ctx.beginPath();  // 开始画园
                    ctx.arc(halfW, halfH, r1+k, 0, Math.PI * 2);
                    ctx.closePath();
                    ctx.stroke();
                    ctx.beginPath();
                    if(!first)
                        ctx.arc(halfW, halfH, r2 + k, 0, Math.PI * 2);
                    ctx.closePath();
                    ctx.stroke();
                }
                if(r1 > r) timer.stop();
                if(r2 > r)
                {
                    r2 = 0;
                    if(first) first = false;
                }
                r1 += 3;
                r2 += 3;
            }
        }
    }