程序设计HTML5 Canvas API _html5教程技巧_H5之家 - 中国HTML5教程资源分享第一站

程序设计HTML5 Canvas API _html5教程技巧HTML5中文学习网，是中国最大的HTML5中文门户，为广大HTML5爱好者提供各种HTML5资料，包括HTML5网站、HTML5资讯、HTML5

点评：本文小编为大家介绍关于程序设计程序设计HTML5 Canvas API ，有需求的朋友可以参考一下。

复制代码

代码如下:

加入Canvas

复制代码

代码如下:

//取得Canvas元素及其绘图上下文var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
//将这条线绘制到Canvas上
context.stroke();

变换

可以通过变换(缩放、平移、旋转)等达到和上面相同的效果。

用变换的方式绘制对角线

复制代码

代码如下:

//取得Canvas元素及其绘图上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//保存当前绘图状态
context.save();
//向右下方移动绘图上下文
context.translate(70, 140);
//以原点为起点，绘制与前面相同的线段
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, -70);
context.stroke();context.restore();

路径

HTML5 Canvas API中的路径代表你希望呈现的任何形状。

beginPath():不论开始绘制何种图形，第一个需要调用的就是beginPath。这个简单的函数不带任何参数，它用来通知canvas将要开始绘制一个新的图形了。

moveTo(x,y):不绘制，将当前位置移动到新的目标坐标(x,y)。

lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y)，而且在两个坐标之间画一条直线。

closePath():这个函数行为和lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。它还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭区域，这对将来的填充和描边都非常有用。

绘制一个松树地树冠

复制代码

代码如下:

function createCanopyPath(context) {
// Draw the tree canopy
context.beginPath();context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);// 树的顶点
context.lineTo(0, -140);context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
// 连接起点，闭合路径
context.closePath();
}function drawTrails() {
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');context.save();
context.translate(130, 250);// 创建表现树冠的路径
createCanopyPath(context);// 绘制当前路径
context.stroke();
context.restore();
}window.addEventListener("load", drawTrails, true);

描边样式

通过描边模式，可以让树冠看起来更加真实。

复制代码

代码如下:

//加宽线条
context.lineWidth = 4;
//平滑路径的接合点
context.lineJoin = 'round';
//颜色
context.strokeStyle = '#663300';
// 绘制当前路径
context.stroke();

填充样式

context.fillStyle = "#339900"; context.fill();

绘制矩形

我们给树增加树干

context.fillStyle = '#663300'; context.fillRect(-5, -50, 10, 50);

绘制曲线

复制代码

代码如下:

context.save();
context.translate(-10, 350);
context.beginPath();// 第一条曲线向右上方弯曲
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);// 向右下方弯曲
context.quadraticCurveTo(310, -250, 410, -250);// Draw the path in a wide brown stroke
context.strokeStyle = '#663300';
context.lineWidth = 20;
context.stroke();// Restore the previous canvas state
context.restore();

在Canvas中插入图片

必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行时异步加载图片，如果试图在图片未完全加载之前就将其呈现到canvas上，那么 canvas将不会显示任何图片，因此，特别注意，在呈现之前，应确保图片已加载完毕。

复制代码

代码如下:

// 加载图片
var bark = new Image();
bark.src = "bark.jpg";// 图片加载完成后，再调用绘图的函数
bark.onload = function () {
drawTrails();
}

显示图片：

//用背景图案填充，作为树干的背景 context.drawImage(bark, -5, -50, 10, 50);

渐变

使用渐变需要三个步骤：

(1)创建渐变对象

(2)为渐变对象设置颜色，指明过渡方式

(3)在context上为填充样式或者描边样式设置渐变

复制代码

代码如下: