html5绘图引擎,HTML5 Canvas初体验之绘图基础

熟悉canvas元素

浏览器支持

2D渲染上下文

坐标系统

2D渲染上下文中直角坐标系

访问2D渲染系统

Learning thebasics of canvas

/ajax/libs/jquery/1/jquery.min.js”>

$(document).ready(function() {

});

var canvas = $(“#myCanvas”);

var context =canvas.get(0).getContext(“2d”);

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

此时刷新页面，你会发现已经出现了一个黑色的正方形！

图形是黑色的，这是在画布上绘制时的默认颜色。在稍后章节中，我们会学习如何使用默认之外的颜色进行图形绘制。

绘制基本形状与线条

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

context.fillRect(x, y, width, height);

在不同位置绘制一个矩形

绘制一个描边的矩形

现在出现的是一个中空的矩形轮廓。

直线

context.beginPath(); // Start the path

context.moveTo(40, 40); // Set the pathorigin

context.lineTo(340, 40); // Set the pathdestination

context.closePath(); // Close the path

context.stroke(); // Outline the path

路径效果如图：

context.lineTo(340, 340);

圆

context.beginPath(); // Start the path

context.arc(230, 90, 50, 0, Math.PI*2,false); // Draw a circle

context.closePath(); // Close the path

context.fill(); // Fill the path

第一个与最后两行分别是开启和关闭路径(弧)并填充。

context.arc(x, y, radius, startAngle,endAngle, anticlockwise);

圆的绘制图示如下：

var degrees = 1; // 1 degree

var radians = degrees * (Math.PI / 180); //0.0175 radians

度和弧度之间的转换

运最后行这个实例，实际效果如下：

如果只是绘制一个半圆，很简单，只需将角度改为π，代码如下：

context.arc(230, 90, 50, 0, Math.PI,false); // Draw a semi-circle

如果一切顺利，应该有一个可爱的半圈，在您的浏览器。

样式

下面我们看看在本章开头提及的定义图形颜色的问题：

context.fillStyle = “rgb(255, 0,0)”;

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

context.fillStyle = “rgb(255, 0,0)”;

context.fillRect(40, 40, 100, 100); // Redsquare

context.fillRect(180, 40, 100, 100); // Redsquare

context.fillStyle = “rgb(0, 0,0)”;

context.fillRect(320, 40, 100, 100); //Black square

在浏览器中的效果为：

context.strokeStyle = “rgb(255, 0,0)”;

context.strokeRect(40, 40, 100, 100); //Red square

context.strokeRect(180, 40, 100, 100); //Red square

context.strokeStyle = “rgb(0, 0,0)”;

context.strokeRect(320, 40, 100, 100); //Black square

context.strokeStyle = “rgb(255, 0,0)”;

context.beginPath();

context.moveTo(40, 180);

context.lineTo(420, 180); // Red line

context.closePath();

context.stroke();

context.strokeStyle = “rgb(0, 0,0)”;

context.beginPath();

context.moveTo(40, 220);

context.lineTo(420, 220); // Black line

context.closePath();

context.stroke();

调整线宽

context.lineWidth = 5; // Make lines thick

context.strokeStyle = “rgb(255, 0,0)”;

context.beginPath();

context.moveTo(40, 180);

context.lineTo(420, 180); // Red line

context.closePath();

context.stroke();

context.lineWidth = 20; // Make lines eventhicker

context.strokeStyle = “rgb(0, 0,0)”;

context.beginPath();

context.moveTo(40, 220);

context.lineTo(420, 220); // Black line

context.closePath();

context.stroke();

运行结果显示为稍厚的红线与过厚的黑线：

lineWidth属性在图形上同样适用：

context.lineWidth = 5; // Make lines thick

context.strokeStyle = “rgb(255, 0,0)”;

context.strokeRect(40, 40, 100, 100); //Red square

context.strokeRect(180, 40, 100, 100); //Red square

context.lineWidth = 20; // Make lines eventhicker

context.strokeStyle = “rgb(0, 0,0)”;

context.strokeRect(320, 40, 100, 100); //Black square

绘制文本

以下代码演示了如何绘制文本：

var text = “Hello, World!”;

context.fillText(text, 40, 40);

var text = “Hello, World!”;

context.font = “30px serif”; //Change the size and font

context.fillText(text, 40, 40);

如果需要你甚至可以设置为斜体：

var text = “Hello, World!”;

context.font = “italic 30pxserif”;

context.fillText(text, 40, 40);

进行下一步之前，我们先来了解下如何勾勒文本，这是非常有用的：

var text = “Hello, World!”;

context.font = “italic 60pxserif”;

context.strokeText(text, 40, 100);

画布擦除

例如刚刚在画布上绘制一个正方形和一个圆：

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

context.beginPath();

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

context.closePath();

context.fill();

context.clearRect(0, 0, 500, 500);

context.clearRect(0, 0, canvas.width(),canvas.height());

完整代码如下：

var canvas = $(“#myCanvas”);

var context = canvas.get(0).getContext(“2d”);

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

context.beginPath();

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

context.closePath();

context.fill();

context.clearRect(0, 0, canvas.width(),canvas.height());

context.clearRect(40, 40, 100, 100);

这样就可以单独留下一个圆。

context.clearRect(180, 40, 100, 100);

这样保留下来的就会只是一个正方形。

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

context.beginPath();

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

context.closePath();

context.fill();

context.clearRect(230, 90, 50, 50);

以上代码会截去圆形的一部分：

有时这种方式可以用于快速方便地绘制复杂图形，先绘制出基本形状再加以裁剪。

宽度/高度技巧

context.fillStyle = “rgb(255, 0,0)”;

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

context.beginPath();

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

context.closePath();

context.fill();

先在画布上绘制一个红色的正方形和圆形，然后添加画布复位：

canvas.attr(“width”,canvas.width());

canvas.attr(“height”,canvas.height());

添加以下代码行：

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

Canvas填充浏览器窗口

var canvas = $(“#myCanvas”);

var context = canvas.get(0).getContext(“2d”);

canvas.attr(“width”,$(window).get(0).innerWidth);

canvas.attr(“height”,$(window).get(0).innerHeight);

context.fillRect(0, 0, canvas.width(),canvas.height());

* { margin: 0; padding: 0; }

html, body { height: 100%; width: 100%; }

canvas { display: block; }

当然，这并没有结束。你会发现不管怎么调整浏览器窗口大小，画布都会保持着之前的尺寸：

这就需要在浏览器窗口大小改变的同时来调整画板的大小。

$(window).resize(resizeCanvas);

function resizeCanvas() {

canvas.attr(“width”, $(window).get(0).innerWidth);

canvas.attr(“height”, $(window).get(0).innerHeight);

context.fillRect(0, 0, canvas.width(), canvas.height());

};

resizeCanvas();

此时你会发现画布实现完美调整，并且不会出现滚动条。

总结

文章转载请注明来源。新辉网主页 > 网页基础 > HTML >

标题：HTML5 Canvas初体验之绘图基础

地址：http://www.a55.com.cn/a/13936.html

关键词：HTML5,Canvas,体验,绘图,基础