<!DOCTYPE html>
<html>
<head>
<style>
canvas{
background:#ccc;
}
</style>
<title>noTitle</title>
<meta charset="">
<link rel="stylesheet" href="">
<script>
window.οnlοad=function () {
var canvas=document.getElementById("canvas");//獲取canvas對象
var cobj=canvas.getContext("2d");//設置繪圖環境，現在canvas暫不支持3d
//cobj.rect(0,0,100,100);創建一個矩形
//var colorObj=cobj.createLinearGradient(0,0,100,0);線性漸變
//var colorObj=cobj.createRadialGradient(50,50,10,50,50,50) 徑向漸變
var imgObj=cobj.createPattern(document.getElementById("img"),"repeat-y") //用於指定顯示元素的類型，如平鋪效果，x方向平鋪，y方向平鋪
//colorObj.addColorStop(0,"red");設置開始漸變的顏色
//colorObj.addColorStop(0.5,"blue");
//colorObj.addColorStop(1,"green");
cobj.shadowColor="rgb(11,25,9)";//指定陰影顏色
cobj.shadowOffsetX=3;//設置陰影x方向的偏移量
cobj.shadowOffsetY=3;
cobj.shadowBlur =5;//設置陰影的模糊程度
cobj.fillStyle=imgObj;//把需要漸變的對象賦值給填充樣式
cobj.strokeStyle="green";//改變canvas的邊框顏色
cobj.fillRect(0,0,100,100);//畫一個填充過的矩形
//cobj.strokeRect(100,100,100,100);畫一個帶有邊框的矩形
}
</script>
</head>
<body>
<canvas width=400 height=400 id="canvas">
您的瀏覽器out了
</canvas>
<img src="1.jpg" id="img">
呵呵
</body>
</html>
