canvas标签的运用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas标签的运用相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas{border: dotted 1px black;}
</style>
</head>
<body>
<canvas class="myCanvas1" height="300" width="300"></canvas>//第一幅图布
<canvas class="myCanvas2" height="300" width="300"></canvas>//第二幅图布
<canvas class="myCanvas3" height="300" width="300"></canvas>//第三幅图布
<script>
//第一幅
var myCanvas1 = document.getElementsByClassName(‘myCanvas1‘)[0];
var head = myCanvas1.getContext(‘2d‘);
head.beginPath();
head.fillStyle = ‘blue‘;
head.arc(75,75,50,0,2*Math.PI);
head.fill();
head.beginPath();
head.fillStyle = ‘black‘;
head.arc(225,75,50,0,2*Math.PI);
head.fill();
head.beginPath();
head.strokeStyle = ‘red‘;
head.fillStyle = ‘yellowgreen‘;
head.rect(75,175,150,75);
head.fill();
head.stroke();
//第二幅
var myCanvas2 = document.getElementsByClassName(‘myCanvas2‘)[0];
var ten = myCanvas2.getContext(‘2d‘);
ten.beginPath();//上
ten.fillStyle = ‘blue‘;
ten.fillRect(100,0,100,25);
ten.beginPath();
ten.fillStyle = ‘black‘;//下
ten.fillRect(100,275,100,25);
ten.beginPath();
ten.fillStyle = ‘red‘;//左
ten.fillRect(0,100,25,100);
ten.beginPath();
ten.fillStyle = ‘gray‘;//右
ten.fillRect(275,100,25,100);
ten.beginPath();
ten.fillStyle = ‘yellow‘;//竖上
ten.fillRect(100,25,100,75);
ten.beginPath();
ten.fillStyle = ‘pink‘;//竖下
ten.fillRect(100,200,100,75);
ten.beginPath();
ten.fillStyle = ‘gold‘;//横左
ten.fillRect(25,100,75,100);
ten.beginPath();
ten.fillStyle = ‘orange‘;//横右
ten.fillRect(200,100,75,100);
ten.beginPath();
ten.fillStyle = ‘yellowgreen‘;//中间
ten.fillRect(100,100,100,100);
//第三幅
var myCanvas3 = document.getElementsByClassName(‘myCanvas3‘)[0];
var tank = myCanvas3.getContext(‘2d‘);
tank.beginPath();//上
tank.fillStyle = ‘blue‘;
tank.fillRect(100,0,100,25);
tank.beginPath();
tank.fillStyle = ‘black‘;//下
tank.fillRect(100,275,100,25);
tank.beginPath();
tank.fillStyle = ‘red‘;//左
tank.fillRect(0,100,25,100);
tank.beginPath();
tank.fillStyle = ‘gray‘;//右
tank.fillRect(275,100,25,100);
tank.beginPath();
tank.fillStyle = ‘gold‘;//横
tank.fillRect(25,125,250,50);
tank.beginPath();
tank.fillStyle = ‘yellow‘;//竖
tank.fillRect(125,25,50,250);
</script>
</body>
</html>
以上是关于canvas标签的运用的主要内容，如果未能解决你的问题，请参考以下文章