您的位置：首页 > Web前端 > HTML5

html5-learning-003-canvas(2)-绘制图形

2012-08-07 13:05 495 查看

矩形

fillRect(x, y, width, height)
:Draws a filled rectangle at position x,y for width and height.
fillRect(0, 0, 10, 20)在坐标轴0, 0的位置，绘制一个填充满了的宽为10，高为20的矩形。

strokeRect(x, y, width, height)
:Draws a rectangular outline at position x,y for width and height.The makes use of the current strokeStyle,lineWidth,lineJoin,and
miterLimit.
strokeRect(0, 0, 10, 20)在坐标轴0, 0的位置，绘制一个宽为10，高为20 的轮廓。

clearRect(x, y, width, height)
:Clears the specified area and makes it fully transparent starting at position x,y for width and height.
clearRect(0, 0, 5, 5)在指定区域，清理出一个宽为5，高为5的完全透明的矩形。

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
:Draws circle

context.arcTo(x1, y1, x2, y2, radius)

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)

eg1:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Create Drawing</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javaScript">
window.addEventListener("load", eventWindowLoaded, false);

var Debugger = function() {};
Debugger.log = function(message) {
try {
console.log(message);
} catch(exception) {
return;
}
}

function eventWindowLoaded() {
canvasApp();
}

function canvasSupport() {
return Modernizr.canvas;
}

function canvasApp() {

if(!canvasSupport) {
return;
}

var theCanvas = document.getElementById("oneCanvas");
var context = theCanvas.getContext("2d");

Debugger.log("Drawing");

function drawScreen() {

//绘制矩形
context.fillStyle = '#000000';
context.strokeStyle = '#ff00ff';
context.lineWidth = 2;
context.fillRect(20, 20, 40, 40);
context.strokeRect(10, 10, 60 , 60);
context.clearRect(30, 30, 20, 20);

//绘制直线
context.strokeStyle = "black";
context.lineWidth = 5;
context.lineCap = 'square';
context.beginPath();
context.moveTo(10, 80);
context.lineTo(100, 80);
context.stroke();
context.closePath();

//绘制折线
context.lineJoin = 'round';
context.lineCap = 'butt';
context.beginPath();
context.moveTo(10, 100);
context.lineTo(35, 100);
context.lineTo(35, 125);
context.stroke();
context.closePath();

//绘制圆
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 5;
//basic circle
context.arc(30, 150, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);
context.stroke();
context.closePath();

//one-quarter circle
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 5;
context.arc(70, 150, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);
context.stroke();
context.closePath();

//three-fourths circle
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 5;
context.arc(130, 150, 20, (Math.PI/180)*0, (Math.PI/180)*90, true);
context.stroke();
context.closePath();

//actTo
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 5;
context.moveTo(100, 0);
context.lineTo(300, 400);
context.arcTo(350, 350, 100, 100, 20);
context.stroke();
context.closePath();

//quadratic Bezier curve
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 5;
context.moveTo(0, 0);
context.quadraticCurveTo(100, 25, 0, 50);
context.stroke();
context.closePath();

// Bezier curve with two control points
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 5;
context.moveTo(150, 0);
context.bezierCurveTo(0, 125, 300, 175, 150, 300);
context.stroke();
context.closePath();
}

drawScreen();
}

</script>
</head>

<body>
<div style="position: absolute; top: 50px; heigh: 50px">
<canvas id="oneCanvas" height="700" width="800">
Your brower does not support HTML5.
</canvas>
</div>
</body>

</html>

eg2:
绘制 “TDOLY"

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Create Drawing</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javaScript">
window.addEventListener("load", eventWindowLoaded, false);

var Debugger = function() {};
Debugger.log = function(message) {
try {
console.log(message);
} catch(exception) {
return;
}
}

function eventWindowLoaded() {
canvasApp();
}

function canvasSupport() {
return Modernizr.canvas;
}

function canvasApp() {

if(!canvasSupport) {
return;
}

var theCanvas = document.getElementById("oneCanvas");
var context = theCanvas.getContext("2d");

Debugger.log("Drawing");

function drawScreen() {

//drawing "TDOLY"

context.strokeStyle = '#ff00ff';
context.lineWidth = 5;
context.lineCap = 'butt';
context.lineJoin = 'round';
context.shadowBlur = 4;
context.shadowColor = '#909090';
context.shadowOffsetX = 1;
context.shadowOffsetY =1;

//drawing "T"
context.beginPath();
context.moveTo(20, 10);
context.lineTo(70, 10);
context.moveTo(46, 10)
context.lineTo(46, 60);
context.stroke();
context.save();

//drawing "D"
context.moveTo(90, 8);
context.lineTo(90, 60);
context.save();
context.moveTo(90 ,30)
context.arc(100, 33, 28, (Math.PI/180)*112, (Math.PI/180)*250, true);
context.stroke();

//drawing "O"
context.moveTo(198, 33);
context.arc(170, 33, 25, (Math.PI/180)*0, (Math.PI/180)*360, false);
context.stroke();
context.save();

//drawing "L"
context.moveTo(220, 10);
context.lineTo(220, 60);
context.lineTo(250, 60);
context.stroke();
context.save();

//drawing "Y"
context.moveTo(260, 10);
context.lineTo(280, 30);
context.lineTo(300, 10);
context.moveTo(280, 30);
context.lineTo(280, 65);
context.stroke();
context.closePath();

}

drawScreen();
}

</script>
</head>

<body>
<div style="position: absolute; top: 50px; heigh: 50px">
<canvas id="oneCanvas" height="700" width="1000">
Your brower does not support HTML5.
</canvas>
</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航