html5学习(canvas)-蒲公英云

html5学习(canvas)

以下是canvas的几个简单案例

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1

<!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>