<!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>