<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#mycanvas{
border: 1px solid #9c9898;
background: blue;
}
</style>
<script language="JavaScript">
window.onload=function(){
var canvas = document.getElementById("mycanvas");
var contex = canvas.getContext("2d");
//绘制矩形
contex.beginPath();
contex.rect(50,50,100,50);
contex.lineWidth=5;
contex.strokeStyle="blue";
contex.stroke();
contex.fillStyle="red";
//设置阴影在fill方法之前
contex.shadowColor="black";//阴影颜色
contex.shadowBlur=0;//模糊度，越大越模糊
contex.shadowOffsetX=50;//偏移量;
contex.shadowOffsetY=10;
contex.globalAlpha=1;//透明度 介于0-1 0 完全透明
contex.fill();
//绘制圆
contex.beginPath();
var centx=320;
var centy=400;
var r=100;
contex.arc(centx,centy,r,0,2*Math.PI);
contex.lineWidth=10;
contex.strokeStyle="black";
contex.stroke();
contex.fillStyle="green";
contex.fill();
}
</script>
</head>
<body>
<canvas id="mycanvas" width="800" height="800"></canvas>
</body>
</html>
