专业网站建设-网站设计-网站制作与网站开发-高端品牌企业宣传策划-包头上往建站

专业网站建设-网站设计-网站制作与网站开发-高端品牌企业宣传策划-包头上往建站

3. lineJoin = type

同一个 path 内，设定线条与线条间接合处的样式。

共有 3 个值 round, bevel 和 miter：

1. round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。

2. bevel 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。

3. miter(默认) 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。

   function draw(){    var canvas = document.getElementById('tutorial');    if (!canvas.getContext) return;    var ctx = canvas.getContext("2d");    var lineJoin = ['round', 'bevel', 'miter'];    ctx.lineWidth = 20;    for (var i = 0; i < lineJoin.length; i++){        ctx.lineJoin = lineJoin[i];        ctx.beginPath();        ctx.moveTo(50, 50 + i * 50);        ctx.lineTo(100, 100 + i * 50);        ctx.lineTo(150, 50 + i * 50);        ctx.lineTo(200, 100 + i * 50);        ctx.lineTo(250, 50 + i * 50);        ctx.stroke();    } }draw();



4. 虚线

用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式。 setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset属性设置起始偏移量。

function draw(){    var canvas = document.getElementById('tutorial');    if (!canvas.getContext) return;    var ctx = canvas.getContext("2d");    ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]    ctx.lineDashOffset = -0;    ctx.strokeRect(50, 50, 210, 210);}draw();

六、绘制文本

绘制文本的两个方法

canvas 提供了两种方法来渲染文本:

fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。

strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

var ctx;

function draw(){

    var canvas = document.getElementById('tutorial');

    if (!canvas.getContext) return;

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

    ctx.font = "100px sans-serif"

    ctx.fillText("天若有情", 10, 100);

    ctx.strokeText("天若有情", 10, 200)

}

draw();

给文本添加样式

font = value 当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。 默认的字体是 10px sans-serif。

textAlign = value 文本对齐选项。 可选的值包括：start, end, left, right or center。 默认值是 start。

textBaseline = value 基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。。

direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

七、绘制图片

我们也可以在 canvas 上直接绘制图片。

7.1 由零开始创建图片

var img = new Image();   // 创建一个<img>元素

专业网站建设-网站设计-网站制作与网站开发-高端品牌企业宣传策划-包头上往建站