html5学习(canvas)

以下是canvas的几个简单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5学习(canvas)</title>
<link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
<h3>html5学习(canvas)</h3>
<canvas id="cv" width="500" height="500"></canvas>
<canvas id="cv2" width="500" height="500"></canvas>
<div id="show" style="height: 100px;">
</div>
</body>
<script type="text/javascript">

var canvasNode = $("cv");
var myCanvas = canvasNode.getContext("2d");

// myCanvas.fillStyle = "blue";
//画线
//起始位置的坐标
// myCanvas.moveTo(10, 10);
// myCanvas.lineTo(150, 50);
// myCanvas.lineTo(10, 50);
// myCanvas.lineTo(10, 200);
// myCanvas.lineTo(300, 200);
// //结束图形
// myCanvas.stroke();

//画圆
/*
参考https://www.runoob.com/jsref/met-canvas-arc.html
	https://www.w3school.com.cn/tags/canvas_arc.asp
*/
myCanvas.fillStyle = "Crimson";
//False = 顺时针，true = 逆时针
// myCanvas.arc(250, 150, 50, 0, Math.PI * 2, true);
myCanvas.arc(250, 150, 125, 0, Math.PI * 1.5);
// myCanvas.arc(250, 150, 125, 0, Math.PI * 1.5, true);
// myCanvas.arc(250, 150, 125, 0, Math.PI * 1, false);
// myCanvas.arc(250, 150, 125, 0, Math.PI * 0.5, true);
// myCanvas.arc(250, 150, 125, 0, Math.PI * 0.5, false);
myCanvas.fill();

//色块叠加
var canvas2Node = $("cv2");
var myCanvas2 = canvas2Node.getContext("2d");
//定义颜色
myCanvas2.fillStyle = "Tomato";
//定义矩形大小
myCanvas2.fillRect(0, 0, 200, 200);

myCanvas2.fillStyle = "rgba(0, 0, 255, 0.5)";
// myCanvas2.fillStyle = "Purple";
myCanvas2.fillRect(100, 100, 500, 500);


function $(elementId) {
	return document.getElementById(elementId);
}

var divNode = $("show");

//监视鼠标移动，实时获取鼠标的坐标
document.onmousemove = function(ev){
	var x = ev.clientX;
	var y = ev.clientY;
	var fontStartNode = '<font style="font-size: 30px; color: blue;">';
	var fontEndNode = '</font>';
	divNode.innerHTML = fontStartNode + "X轴:" + x + "<br />" + "Y轴:" + y + fontEndNode;
}
</script>
</html>
canvas的其他功能我就不一一举例了，大家可以去查询相关的文档！
猜你喜欢
