html5_canvas初学

2023-09-19 阅读 17 评论 0

摘要：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><h3>什么是canvas？</h3><p>canvas是在html5中的一个重要元素&#

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h3>什么是canvas？</h3><p>canvas是在html5中的一个重要元素，专门用来绘制图形。</p><h4>画布的创建方法：指定id、width、height</h4><h4>取得上下文：getContext("2d")</h4><h4>绘制图形的方法：fillstyle填充、storkestyle边框</h4><canvas id="canvas" width="500" height="350"></canvas><script>var canvas_id = document.getElementById('canvas');var content = canvas_id.getContext('2d');content.fillStyle = "#000";  //背景颜色 设置或返回用于填充绘画的颜色、渐变或模式
        content.strokeStyle = "#f60"; //边框颜色 设置或返回用于笔触的颜色、渐变或模式
        content.lineWidth = 5;  //边框宽度  设置或返回当前的线条宽度
        content.fillRect(0,0,500,350); //最外层       绘制“被填充”的矩形 
        content.strokeRect(50,50,100,200);//里层  绘制矩形（无填充）
        content.strokeRect(100,100,100,200);//里层  绘制矩形（无填充）</script>
</body>
</html>