HTML之canvas的基本操作实例分享
程序员文章站
2022-05-18 23:45:40
HTML之canvas的基本操作实例分享
HTML之canvas的基本操作实例分享
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas；time:18.3.13</title>
</head>
<body>
<canvas id="mycanvas" width="200" height="100" style="border:1px solid rgba(9,8,8,1.00)"> </canvas>
<canvas id="mycanvas2" width ="200" height="100" style="border:1px solid black"></canvas>
<script>
/*绘图顺序由代码顺序决定，图层先后由代码决定*/
var c = document.getElementById("mycanvas");/*查找文档中的一个特定元素*/
var ctx = c.getContext("2d");/*获得2d图像*/
ctx.fillStyle="#fff";
ctx.fillRect(0,0,200,100);/*x,y,w,h:左上角宽度，高度，矩形宽高*/
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);/*圆中心x，y坐标，半径，起始角，结束角，false=顺时针*/
ctx.fillStyle="red";
ctx.fill();/*给圆填充颜色*/
ctx.fillStyle="black";
ctx.font="bold 18pt Arial";
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.fillText("日本狗",95,50);
ctx.moveTo(0,0);/*线开始坐标*/
ctx.lineTo(200,100);/*线结束坐标*/
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();/*绘制路径*/
var c2 = document.getElementById("mycanvas2");/*查找文档中的一个特定元素*/
var ctx2 = c2.getContext("2d");/*获得2d图像*/
ctx2.fillStyle="blue";
ctx2.fillRect(0,0,200,100);/*x,y,w,h:左上角宽度，高度，矩形宽高*/
</script>
</body>
</html> 上一篇： 臭豆腐你肯定吃过，那你了解他吗
下一篇： 如何将炖蛋做的又滑又嫩