canvas线条的特性详解

日期:2021-02-23 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

1、线条的帽子lineCap

赋值:butt(默认设置值),round圆头,square方头

var canvas=document.getElementById("canvas");

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

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

context.lineWidth=40;
context.strokeStyle="#005588";

//3个beginpath()画了3条平行线
context.beginPath();
context.moveTo(100,200);
context.lineTo(700,200);
context.lineCap="butt";
context.stroke();

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

context.beginPath();
context.moveTo(100,600);
context.lineTo(700,600);
context.lineCap="square";
context.stroke();

//baseline
context.lineWidth=1;
context.strokeStyle="#27a";
context.moveTo(100,100);
context.lineTo(100,700);
context.moveTo(700,100);
context.lineTo(700,700);
context.stroke();

round做动漫的情况下必须圆角能够立即画,lineCap的实际效果只能用于直线的刚开始处和末尾处,不可以用于联接处。

lineCap="square"能够用来线上段闭合情况下彻底闭合,可是還是强烈推荐应用clothPath()闭合。

var canvas=document.getElementById("canvas");

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

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

context.beginPath();
context.moveTo(100, 350);
context.lineTo(500,350);
context.lineTo(500,200);
context.lineTo(700,400);
context.lineTo(500,600);
context.lineTo(500,450);
context.lineTo(100,450);
context.lineTo(100,350);
// context.closePath(); //强烈推荐

context.lineWidth=10;
context.lineCap="square"; //不强烈推荐
context.fillStyle="yellow";
context.strokeStyle="#058"

context.fill();
context.stroke();

2、画1个5角星,表明线条其它情况特性

圆上的5个角均分360°,每一个角72°,90°⑺2°=18°

小圆上的角均分72°,18°+36°=54°

角度转弧度——弧度=角度*π/180 即(18+i*72)*Math.PI/180

var canvas=document.getElementById("canvas");

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

var context=canvas.getContext("2d");
context.beginPath();
//角度转弧度:除以180*PI
for(var i=0;i<5;i++){
    context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400,
        -Math.sin((18+i*72)/180*Math.PI)*300+400);
    context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400,
        -Math.sin((54+i*72)/180*Math.PI)*150+400);
}

context.closePath();

context.lineWidth=10;
context.stroke();

封裝成涵数:

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

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

    var context=canvas.getContext("2d");
    context.lineWidth=10;
    drawStar(context,150,300,400,400)
}        

function drawStar(ctx,r,R,x,y,){
    ctx.beginPath();
    //角度转弧度:除以180*PI
    for(var i=0;i<5;i++){
        ctx.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+x,
            -Math.sin((18+i*72)/180*Math.PI)*R+y);
            ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,
            -Math.sin((54+i*72)/180*Math.PI)*r+y);
    }

    ctx.closePath();
    ctx.stroke();
}

各自改动小r=80,200,400获得下面图型

 

 

提升1个顺时针转动的主要参数:rot

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

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

    var context=canvas.getContext("2d");
    context.lineWidth=10;
    drawStar(context,150,300,400,400,30);
}        




//rot顺时针转动的角度
function drawStar(ctx,r,R,x,y,rot){
    ctx.beginPath();
    //角度转弧度:除以180*PI
    for(var i=0;i<5;i++){
        ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
            -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
            ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
            -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
    }

    ctx.closePath();
    ctx.stroke();
}

转动30度的实际效果以下:

3、线条的联接lineJoin和miterLimit

1、lineJoin赋值

miter(default)始终展现1个尖角,bevel斜接,round圆角

bevel像彩带折下来的实际效果。

 

 

 

2、miter有关miterLimit的特性

设定小r为30,lineJoin为miter,实际效果以下:角沒有拓宽成尖角,而是采用bevel的方法来显示信息。

context.lineJoin="miter";
drawStar(context,30,300,400,400,30);

为何?

由于context.miterLimit=10默认设置值是10,

miterlimit仅有当lineJoin为miter时才会合理。

miterLimit指的是,当应用miter做为线条和线条相接的方法时,所 造成的内角和外角的间距的最大值

默认设置值是10就意味着最大值是10px,1旦超出来10px就会应用bevel的方法显示信息。

上面把内圆半径r设定为30时,产生的尖角十分尖,内角和外角的间距超出来miterLimit的10,

如今把miterlimit改大点,改为20,实际效果以下:

context.lineJoin="miter";
 context.miterLimit=20;
 drawStar(context,30,300,400,400,30);

留意:miterLimit其实不是从白色尖长到黑色尖长的间距,这个间距远宏大于20px。

当造成miterLimit时1定是线条有宽度的,有宽度的线条正中间的线的尖角与外边尖角立即的间距。

canvas得出1个miterLimit的工作经验值10。仅有在极为非常的状况下,必须主要表现十分锐利的角的情况下才必须改动miterLimit。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:详解Canvas 跨域脱坑实践活动 返回下一篇:没有了