熟悉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,体验,绘图,基础