您的位置：首页 > 其它

canvas

2016-01-30 06:02 302 查看

<!DOCTYPE html>
<html>
<head>
<style>
canvas{
background:#ccc;
}
</style>
<title>noTitle</title>
<meta charset="">
<link rel="stylesheet" href="">
<script>
window.onload=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航