html5 context,html5 context属性解释及代码实例

// 画直线

function showline(){

// 获取画布

var canvas=document.getElementById("can")

// 获取上下文

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

// 设置开始位置

context.moveTo(10,10);

// 设置结束位置

context.lineTo(100,200);

// 开始画

context.lineTo(190,10);

// 改变线的颜色

context.strokeStyle="red";

// 线的宽度

context.lineWidth=5;

context.lineJoin="round";

context.stroke();

}

// 画五角星

function　showfivestar(){

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

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

context.moveTo(31,264);

context.lineTo(81.75,211);

context.lineTo(61,287);

context.lineTo(39.75,212);

context.lineTo(93.25,264);

context.lineTo(31,264);

context.strokeStyle="red";

context.lineWidth=5;

context.stroke();

}

//画矩形

function showrect(){

// 获取画布

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

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

// context.strokeRect(10,10,100,100);

红线

// context.strokeStyle="red";

线宽

// context.lineWidth=5;

// 填充颜色 必须在画之前声明

// 绘制圆形的结束线帽：样式

// lineCap 属性设置或返回线条末端线帽的样式。

// 属性值

// 值 描述

//butt 默认。向线条的每个末端添加平直的边缘。

//round 向线条的每个末端添加圆形线帽。

//square向线条的每个末端添加正方形线帽。

context.lineCap="round";

// 当两条线条交汇时，创建圆形边角：

// lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。

// 属性值

// 值 描述

// bevel创建斜角。

// round创建圆角。

// miter默认。创建尖角。

context.lineJoin="round";

// 属性说明如何绘制交点。

// 当宽线条使用设置为 "miter" 的 lineJoin

// 属性绘制并且两条线段以锐角相交的时候，所得

// 的斜面可能相当长。当斜面太长，就会变得不协

// 调。miterLimit 属性为斜面的长度设置一个上

// 限。这个属性表示斜面长度和线条长度的比值。

// 默认是 10，意味着一个斜面的长度不应该超过

// 线条宽度的 10 倍。如果斜面达到这个长度，它

// 就变成斜角了。当 lineJoin 为 "round" 或

// "bevel" 的时候，这个属性无效。

context.miterLimit;

context.fillStyle="red";

填充一个区域

context.fillRect(10,10,200,200);

context.fillStyle="blue"

填充一个区域

context.fillRect(10,10,100,100);

}

//画田字格

function showt(){

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

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

context.strokeStyle="red";

context.strokeRect(10,10,100,100);

context.moveTo(60,10);

context.lineTo(60,110);

context.moveTo(10,60);

context.lineTo(110,60);

context.stroke();

}

// 画圆形

function showcircle(){

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

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

// 圆心，半径，开始角度，结束角度

context.arc(100,100,50,0,Math.PI*2,false);

// 画线

// context.stroke();

// 填充颜色

context.fillStyle="blue";

// 填充

context.fill();

//重新开始一个 否则会覆盖掉

context.beginPath();

context.arc(100,100,25,0,Math.PI*2,false);

context.fillStyle="red";

context.fill();

}