html5画线,html5画圆,html5渐变颜色,html5画图
1.画线
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>画线</title>
</head>
<body>
<canvasid="test3"width="100px"height="40px"></canvas>
<scripttype="text/javascript">
varc=document.getElementById("test3");
varc1=c.getContext("2d");
c1.moveTo(10,10);
c1.lineTo(100,140);
c1.stroke();
</script>
</body>
</html>
效果如下
2.画圆
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>圆形</title>
</head>
<body>
<canvasid="myCanvas"width="100px"height="100px"style="background-color:#7f9db9"></canvas>
<scripttype="text/javascript">
varc=document.getElementById("myCanvas");
varc1=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. 渐变颜色
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>渐变颜色背景</title>
</head>
<body>
<canvasid="myCanvas"style="border:1pxsolidbeige">
></canvas>
<scripttype="text/javascript">
varc=document.getElementById("myCanvas");
varc1=c.getContext("2d");
varc2=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.画图
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>图像</title>
</head>
<body>
<canvasid="myCanvas"width="600px"height="200px"style="border:1pxsolid#fbf9ee"/>
<scripttype="text/javascript">
varc=document.getElementById("myCanvas");
varc1=c.getContext("2d");
varimage=newImage();
image.src="../image/1.jpg";
c1.drawImage(image,0,0);
</script>
</body>
</html>
效果如下：