HTML5 Canvas Tech Demo: Create Interactive Visuals
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tech Demo</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>HTML5 Canvas Tech Demo</h1>
<h2>HTML5 Canvas</h2>
<canvas id='myCanvas' width='600' height='400'></canvas>
<pre><code><script>
// Get the canvas element
const canvas = document.querySelector('#myCanvas');
// Get the context
const ctx = canvas.getContext('2d');
// Draw a rectangle
ctx.fillStyle = '#FF0000';
ctx.fillRect(20, 20, 150, 100);
// Draw a circle
ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2, true);
ctx.fillStyle = '#00FF00';
ctx.fill();
// Write some text
ctx.font = '30px Arial';
ctx.fillStyle = '#0000FF';
ctx.fillText('My Tech Demo', 20, 200);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnAq 著作权归作者所有。请勿转载和采集!