canvas

最新推荐文章于 2024-11-15 13:22:53 发布

不是我的货

最新推荐文章于 2024-11-15 13:22:53 发布

阅读量430

点赞数 1

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/wym1581/article/details/50610213

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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