<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<style>
canvas{
background:#ccc;
}
</style>
<script>
window.οnlοad=function(){
var canvas = document.getElementById("canvas");
var cobj = canvas.getContext("2d");
//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");
//colorObj.addColorStop(0,"red");
//colorObj.addColorStop(0.5,"blue");
//colorObj.addColorStop(1,"green");
cobj.fillStyle=imgObj;
cobj.strokeStyle="green";
cobj.shadowColor="rgb(11,25,9)";//设置阴影颜色
cobj.shadowOffsetX=3;
cobj.shadowOffsetY=3;
cobj.shadowBlur=3;//模糊
cobj.fillRect(0,0,300,300);
//cobj.strokeRect(100,100,100,100);
}
</script>
</head>
<body>
<canvas width="400px" height="400px" id="canvas"></canvas>
<img src="1.JPG" id="img"/>
</body>
</html>
1730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
