初识canvas

canvas

canvas标签是图形容器，需要通过脚本语言绘制。

设置宽高:

canvas可以通过脚本设置宽高，也可以通过标签设置。

1 脚本设置：canvas.width:100;convas.height:100;

2 标签设置：<canvas width="100" height="100"></canvas>

设置绘图环境：

常见contextId有2d,3d,webGl等。常用2d和webGL

var ctx = canvas.getContext("2d");

设置画布背景：

ctx.fillStyle = "rgba(0,0,0,0.3)";

设置偏移：

 ctx.translate(100,100);

设置画布大小与位置：

ctx.fillRect(x,y,width,height);

设置透明度：

ctx.globalAlpha = 0.5;

设置边框线颜色：颜色要在矩形之前绘制才行

ctx.strokeStyle  = “red”；

设置边线宽度：

ctx.lineWidth = 5;

设置矩形边线：

ctx.strokeRect(x,y,width,height)

填充画布：

ctx.fill();

填充图片：

ctx.createPattern(e.targert,"no-repeat");

绘制一个红色方块

var canvas, ctx;
        canvas = document.querySelector("canvas");
        ctx = canvas.getContext("2d");
        //绘制背景色
        ctx.fillStyle = "rgba(0,0,0,0.3)";
        ctx.fillRect(0, 0, 400, 300);
        //绘制红色方块
        ctx.fillStyle = "rgba(255,0,0,1)";
        //在50,50坐标绘制一个100×100大小的矩形
        ctx.fillRect(50, 50, 100, 100);

效果：

清除上述矩形：

清除之后会留下空白

        ctx.clearRect(50,50,100,100);

绘制一个圆：

        var canvas, ctx;
        canvas = document.querySelector("canvas");
        ctx = canvas.getContext("2d");
        var fill = ctx.createRadialGradient(50,50,80,50,50,0);
        fill.addColorStop(0,"red");
        fill.addColorStop(0.5,"rgba(255,255,0,1)");
        ctx.fillStyle = fill;
        //偏移
        ctx.translate(100,100);
        ctx.fillRect(0,0,100,100);

填充图片：createPattern

var canvas, ctx;
        canvas = document.querySelector("canvas");
        ctx = canvas.getContext("2d");
        fills();
        function fills(){
            var img = new Image();
            img.src = "../img/34-.jpg";
            img.addEventListener("load",loadHandler);
        }
        function loadHandler(e){
            var fill = ctx.createPattern(e.target,"no-repeat");
            ctx.fillStyle = fill;
            //缩放图片
            ctx.scale(0.4,0.4);
            ctx.fillRect(0,0,1024,717);
        }

给红色方块绘制阴影：

// 绘制阴影
        var canvas, ctx;
        canvas = document.querySelector("canvas");
        ctx = canvas.getContext("2d");
        function fills(){
            ctx.fillStyle = "red";
            ctx.shadowOffsetX = 4;
            ctx.shadowOffsetY = 4;            
            ctx.shadowBlur = 4;
            ctx.shadowColor = "#666666";
            ctx.fillRect(50,50,100,100);
        }
        fills();

绘制边线，设置边线粗细

var canvas, ctx;
        canvas = document.querySelector("canvas");
        ctx = canvas.getContext("2d");
        function fills(){
            ctx.strokeStyle = "red";
            ctx.lineWidth = 5;
            ctx.strokeRect(50,50,100,100);
        }
        fills();