html 5 自定义填充,2.3 使用自定义图形和填充样式 - HTML5 Canvas 实战

本节，我们将绘制四个三角形，并用不同的填充样式来填充每个三角形。HTML5的画布API提供的填充样式有颜色、线性渐变、径向渐变和图案。

图2-3 绘制自定义填充样式

按照以下步骤绘制4个三角形，一个使用颜色填充、一个使用线性渐变填充、一个使用径向渐变填充、一个使用图案填充：

1. 创建一个简单的函数，该函数绘制一个矩形：

function drawTriangle(context, x, y, triangleWidth, triangleHeight, fillStyle) {

context.beginPath();

context.moveTo(x, y);

context.lineTo(x  + triangleWidth  /  2, y  + triangleHeight);

context.lineTo(x  - triangleWidth  /  2, y  + triangleHeight);

context.closePath();

context.fillStyle  = fillStyle; context.fill();

}

2. 定义2D画布上下文，并设置高度、宽度、及三角形在y轴上的位置：

window.onload = function(){

var canvas  = document.getElementById("myCanva