Canvas基础知识

作者: Mika_I | 来源:发表于2018-11-07 15:19 被阅读0次

总结一些基础知识

1. 画一条直线

moveTo设置起点，lineTo设置下一坐标

<canvas id="canvas"></canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 800;

        var context = canvas.getContext("2d");
        // 设置状态
        context.beginPath();
        context.moveTo(100, 100);// 起点
        context.lineTo(700, 700);// 下一点坐标
        context.closePath();
        context.lineWidth = 10;// 线宽
        context.strokeStyle = "#0f0";// 颜色
        
        // 绘制
        context.stroke();
    }
</script>

lineCap属性 - 设置线段起始位置的样式，取值如下
butt:(default)默认值
round:圆头
square:方头

<canvas id="canvas"></canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 800;

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

        context.lineWidth = 30;
        context.strokeStyle = "tomato";

        context.beginPath();
        context.moveTo(100, 100);
        context.lineTo(400, 100);
        context.lineCap = "butt";
        context.stroke();

        context.beginPath();
        context.moveTo(100, 200);
        context.lineTo(400, 200);
        context.lineCap = "round";
        context.stroke();

        context.beginPath();
        context.moveTo(100, 300);
        context.lineTo(400, 300);
        context.lineCap = "square";
        context.stroke();
        // 辅助线
        context.lineWidth = 1;
        context.beginPath();
        context.moveTo(100, 50);
        context.lineTo(100, 350);
        context.stroke();

        context.beginPath();
        context.moveTo(400, 50);
        context.lineTo(400, 350);
        context.stroke();
    }
</script>

结果如下：

lineCap

lineJoin属性- 两条直线相交处的样式，可取值如下：
miter：(default)，尖角，miterLimit 默认值10,控制尖角的长度，只有设置miter时生效。
bevel：斜接
round: 圆角

<canvas id="canvas"></canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 800;

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

        context.lineWidth = 50;
        context.strokeStyle = "tomato";

        context.beginPath();
        context.moveTo(300, 300);
        context.lineTo(400, 100);
        context.lineTo(500, 300);
        context.lineJoin = "miter";
        context.miterLimit = 10;
        context.stroke();

        context.beginPath();
        context.moveTo(300, 500);
        context.lineTo(400, 300);
        context.lineTo(500, 500);
        context.lineJoin = "bevel";
        context.miterLimit = 10;
        context.stroke();

        context.beginPath();
        context.moveTo(300, 700);
        context.lineTo(400, 500);
        context.lineTo(500, 700);
        context.lineJoin = "round";
        context.miterLimit = 10;
        context.stroke();
    }
</script>

示意图如下：

lineJoin

2. 画一个矩形

(1).直接使用连线的方式画出矩形。

<canvas id="canvas"></canvas>
<script>

    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 800;

        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(100, 100);
        context.lineTo(600, 100);
        context.lineTo(600, 600);
        context.lineTo(100, 600);
        context.lineTo(100, 100);//可以省略，closePath()会自动封闭图形
        context.closePath();

        context.lineWidth = 10;
        context.strokeStyle = "#0f0";

        context.stroke();
    }
</script>

(2).使用context.rect(x, y, width, height)规划路径，这里只规划路径，不会绘制。
context.fillRect(x, y, width, height), context.strokeRect(x, y, width, height)不但规划路径，还将矩形直接绘制出来。

<canvas id="canvas"></canvas>
<script>

    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 800;

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

        drawRect(context, 100, 100, 300, 200, 5, "blue", "red");
        drawRect2(context, 250, 200, 300, 200, 5, "blue", "rgba(0, 255, 0, 0.5)");


    }

    function drawRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){
        cxt.beginPath();
        cxt.rect(x,y, width, height); // 规划路径
        cxt.closePath();

        cxt.lineWidth = borderWidth;
        cxt.fillStyle = fillColor;
        cxt.strokeStyle = borderColor;

        cxt.fill();
        cxt.stroke();
    }
    function drawRect2(cxt, x, y, width, height, borderWidth, borderColor, fillColor){
        cxt.lineWidth = borderWidth;
        cxt.fillStyle = fillColor;
        cxt.strokeStyle = borderColor;

        cxt.fillRect(x, y, width, height); // 填充
        cxt.strokeRect(x, y, width, height);
    }
</script>

fillStyle, strokeStyle 可取颜色值如下：
#ffffff 、#fff、
rgb(255, 255, 100)、rgba(100, 100, 100, 0.8)、
hsl(20, 62%, 28%)、 hsla(30, 82%, 45%, 0.6)、
red

3. 图形变换

位移：translate(x, y)
旋转：rotate(deg)
缩放：scale(sx, sy) , sx - x方向缩放倍数，sy - y方向缩放倍数。
变换矩阵
a c e          a - 水平缩放(1) ;   b - 水平倾斜(0)
b d f          c - 垂直倾斜(0) ;   d - 垂直缩放(1)
0 0 1          e - 水平位移(0);   f - 垂直位移(0)
设置变换矩阵：
transform(a, b, c, d, e, f)
setTransform(a, b, c, d, e, f) 设置变换后的默认值
canvas状态的保存与恢复
context.save();
context.restore();

<canvas id="canvas" style="border: 1px solid #000;"></canvas>
<script>

   window.onload = function () {
       var canvas = document.getElementById("canvas");

       canvas.width = 800;
       canvas.height = 800;

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

       context.save();
       context.fillStyle = "red";
       context.translate(100, 100);
       context.fillRect(0, 0, 400, 400);
       context.restore();

       context.save();
       context.fillStyle = "green";
       context.translate(300, 300);
       context.fillRect(0, 0, 400, 400);
       context.restore();
   };

<canvas id="canvas"></canvas>
<script>

    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 800;

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

        context.fillStyle = "#000";
        context.fillRect(0, 0, canvas.width, canvas.height);

        for(var i = 0; i < 200; i++){
            var r = Math.random()*10+10;
            var x = Math.random()*canvas.width;
            var y = Math.random()*canvas.height;
            var a = Math.random()*360;
            drawStar(context, x, y, r, a)
        }
    };

    function drawStar(cxt, x, y, R, rot){
        var rot = rot || 0;

        cxt.fillStyle = "#fb3";
        cxt.strokeStyle = "#fd5";
        cxt.lineWidth = 3;

        cxt.save();
        cxt.transform(R, 0, 0, R, x, y);
        // cxt.translate(x, y);
        cxt.rotate(rot/180*Math.PI);
        // cxt.scale(R, R);

        starPath(cxt);

        cxt.fill();
        cxt.stroke();

        cxt.restore();

    }
    function starPath(cxt){
        cxt.beginPath();

        for(var i = 0; i < 5; i ++){
            cxt.lineTo(Math.cos((18 + i*72 ) / 180 * Math.PI),
                -Math.sin((18 + i*72) / 180 * Math.PI) );
            cxt.lineTo(Math.cos((54 + i*72) / 180 * Math.PI) * 0.5,
                -Math.sin((54 + i*72 ) / 180 * Math.PI) * 0.5);
        }
        cxt.setTransform(1, 0, 0, 1, 0, 0);//清除上一次的影响
        cxt.closePath();
    }
</script>

4. fillStyle - 线性渐变&径向渐变

线性渐变
//step1
var grd = context.createLinearGradient(xstart, ystart, xend, yend);
//step2
grd.addColorStop(stop, color);

<canvas id="canvas"></canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        var context = canvas.getContext("2d");

        var linearGrad = context.createLinearGradient(0, 0, 800, 800);
        linearGrad.addColorStop(0.0, 'white');
        linearGrad.addColorStop(0.25, 'yellow');
        linearGrad.addColorStop(0.5, 'green');
        linearGrad.addColorStop(0.75, 'blue');
        linearGrad.addColorStop(1.0, 'black');

        context.fillStyle = linearGrad;
        context.fillRect(0, 0, 800, 800);
    }
</script>

径向渐变
//step1
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1);
//step2
grd.addColorStop(stop, color);

<canvas id="canvas"></canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        var context = canvas.getContext("2d");

        var linearGrad = context.createRadialGradient(400, 400, 100, 400, 400, 400);
        linearGrad.addColorStop(0.0, 'white');
        linearGrad.addColorStop(0.25, 'yellow');
        linearGrad.addColorStop(0.5, 'green');
        linearGrad.addColorStop(0.75, 'blue');
        linearGrad.addColorStop(1.0, 'black');

        context.fillStyle = linearGrad;
        context.fillRect(0, 0, 800, 800);
    }
</script>

5. createPattern

createPattern(img, repeat-style)
repeat-style:no-repeat; repeat-x; repeat-y; repeat
createPattern(canvas, repeat-style)
createPattern(video, repeat-style)

6.曲线绘制

圆或圆弧

context.arc(context, center, radius, startingAngle, endingAngle, anticlockwiae)
anticlockwiae = false 顺时针

<canvas id="canvas"></canvas>
<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");

        canvas.width = 1024;
        canvas.height = 768;

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

        context.lineWidth = 2;
        context.strokeStyle = "#058";

        for(var i = 0; i < 10; i ++){
            context.beginPath();
            context.arc(50 + i*100, 60, 40, 0,2*Math.PI*(i+1)/10);
            context.closePath();//会自动闭合

            context.stroke()
        }

        for(var i = 0; i < 10; i ++){
            context.beginPath();
            context.arc(50 + i*100, 180, 40, 0,2*Math.PI*(i+1)/10);

            context.stroke()
        }

        for(var i = 0; i < 10; i ++){
            context.beginPath();
            context.arc(50 + i*100, 300, 40, 0,2*Math.PI*(i+1)/10, true);
            context.closePath();//会自动闭合

            context.stroke()
        }

        for(var i = 0; i < 10; i ++){
            context.beginPath();
            context.arc(50 + i*100, 420, 40, 0,2*Math.PI*(i+1)/10, true);

            context.stroke()
        }

        context.fillStyle = "#0f0";

        for(var i = 0; i < 10; i ++){
            context.beginPath();
            context.arc(50 + i*100, 540, 40, 0,2*Math.PI*(i+1)/10, true);
            context.closePath();//会自动闭合

            context.fill()
        }

        for(var i = 0; i < 10; i ++){
            context.beginPath();
            context.arc(50 + i*100, 660, 40, 0,2*Math.PI*(i+1)/10, true);

            context.fill()
        }
    }
</script>

arcTo

context.arcTo(x1, y1, x2, y2, radius)

<canvas id="canvas"></canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 1800;
        canvas.height = 1800;

        var context = canvas.getContext("2d");
        context.moveTo(400,100)
        context.arcTo(1200,400,400,700,400);
        context.strokeStyle= "red"
        context.stroke()
    }
</script>

贝赛尔曲线 Bezier

（1）QuadraticCurveTo(二次)
context.moveTo(x0, y0); //初始点
contextquadraticCurveTo(x1, y1, x2, y2)//控制点、结束点
（2）BezierCurveTo(三次)
context.moveTo(x0, y0);
context.bezierCurveTo(x1, y1, x2, y2, x3, y3);

    function drawLand(cxt){
        cxt.save();

        cxt.beginPath();
        cxt.moveTo(0, 600);
        cxt.bezierCurveTo(540, 400, 660, 800, 1200, 600);
        cxt.lineTo(1200, 800);
        cxt.lineTo(0, 800);
        cxt.closePath();

        var lanStyle = cxt.createLinearGradient(0, 800, 0, 0);
        lanStyle.addColorStop(0.0, "#030");
        lanStyle.addColorStop(1.0, "#580");
        cxt.fillStyle = lanStyle;

        cxt.fill();

        cxt.restore();
    }

7.文字渲染基础

context.font = "bold 40px Arial";
context.fillText(String, x, y, [maxlen]);
context.StrokeText(String, x, y, [maclen])

<canvas id="canvas"></canvas>
<script>

    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 800;

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

        context.font = "bold 40px Arial";
        context.fillStyle = "#058";
        context.fillText("欢迎学习Canvas！欢迎学习Canvas！", 40, 100);
        context.lineWidth = 1;

        context.strokeStyle = "#058";
        context.strokeText("欢迎学习Canvas！欢迎学习Canvas！", 40, 200);

        context.fillText("欢迎学习Canvas！欢迎学习Canvas！", 40, 300, 400);
        context.strokeText("欢迎学习Canvas！欢迎学习Canvas！", 40, 400, 400);
    }
</script>

font

默认值"20px sans-serif"
（1）font-style:
normal(default);
italic(斜体字);
oblique(倾斜字体)
（2）font-variant:
normal;
small-caps(以小型形式显示大写字母)
（3）font-weight:
lighter;
normal;
bold;
bolder;
100,200,300,400(normal),500,600,700(bold),800,900
（4）font-size:
20px;
2em;
150%;
（5）font-family:
设置多种字体备选；
支持@font-face
web安全字体

<canvas id="canvas"></canvas>
<script>

    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 800;

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

        context.font = "bold 40px Arial";

        var linearGrad = context.createLinearGradient(0, 0, 700, 0);
        linearGrad.addColorStop(0.0, 'tomato');
        linearGrad.addColorStop(0.25, 'yellow');
        linearGrad.addColorStop(0.5, 'green');
        linearGrad.addColorStop(0.75, 'pink');
        linearGrad.addColorStop(1.0, 'red');

        context.fillStyle = linearGrad;
        // context.fillStyle = "#058";
        context.fillText("欢迎学习Canvas！欢迎学习Canvas！", 40, 100);
        context.lineWidth = 1;

        context.strokeStyle = "#058";
        context.strokeText("欢迎学习Canvas！欢迎学习Canvas！", 40, 200);

        context.fillText("欢迎学习Canvas！欢迎学习Canvas！", 40, 300, 400);
        context.strokeText("欢迎学习Canvas！欢迎学习Canvas！", 40, 400, 400);
    }
</script>

文本对齐

context.textAlign = left/center/right
cotext.textBaseline = top/middle/bottom (alphabetic拉丁/ideographic汉，日/hanging印)

文本度量

context.measureText(String).width

8. 阴影

context.shadowColor;
context.shadowOffsetX;//x位移值
context.shadowOffsetY;//y位移值
xontext.shadowBlur; //模糊值

9. global

globalAlpha = 1(default) //使全局具有透明度
glibalCompositeOperation//绘制的图像在重叠时产生的效果
"sourece-over" - 后绘制的图像在先绘制的图形上面
"destination-over" - 先绘制的图形在后悔值的上面
···········································································································································································
source-over
source-atop
source-in
source-out
···········································································································································································
destination-over
destination-atop
destination-in
destination-out
···········································································································································································
lighter
copy
xor

10. 剪辑区域

context.clip();

11. 剪纸效果

非零环绕原则

其他

clearRect
context.clearRect(x, y, width, height)
isPointInPath
context.isPointInPath(x, y)
var x = event.clientX - canvas.getBoundingClientRect().left
var y = event.clientY - canvas.getBoundingClientRect().Right

兼容性

explorecanvas https://code.google.con/p/explorecanvas/
canvas 图形库：canvasplus/ArtisanJS/Rgraph

Canvas基础知识

1. 画一条直线

2. 画一个矩形

3. 图形变换

4. fillStyle - 线性渐变&径向渐变

5. createPattern

6.曲线绘制

圆或圆弧

arcTo

贝赛尔曲线 Bezier

7.文字渲染基础

font

文本对齐

文本度量

8. 阴影

9. global

10. 剪辑区域

11. 剪纸效果

其他

兼容性

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读