1.画线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画线</title>
</head>
<body>
<canvas id="test3" width="100px" height="40px"></canvas>
<script type="text/javascript">
var c=document.getElementById("test3");
var c1= c.getContext("2d");
c1.moveTo(10,10);
c1.lineTo(100,140);
c1.stroke();
</script>
</body>
</html>
效果如下
2. 画圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆形</title>
</head>
<body>
<canvas id="myCanvas" width="100px" height="100px" style="background-color: #7f9db9"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var c1= c.getContext("2d");
c1.fillStyle="green";
c1.beginPath();
c1.arc(40,40,15,0,Math.PI*2,true);
c1.closePath();
c1.fill();
</script>
</body>
</html>
效果如下
3. 渐变颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变颜色背景</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid beige">
></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var c1= c.getContext("2d");
var c2=c1.createLinearGradient(0,0,175,50);
c2.addColorStop(0,"green");
c2.addColorStop(1,"red");
c1.fillStyle=c2;
c1.fillRect(0,0,175,50);
</script>
</body>
</html>
效果如下：
4.画图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像</title>
</head>
<body>
<canvas id="myCanvas" width="600px" height="200px" style="border: 1px solid #fbf9ee"/>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var c1= c.getContext("2d");
var image=new Image();
image.src="../image/1.jpg";
c1.drawImage(image,0,0);
</script>
</body>
</html>
效果如下：
