html5创建变换图形-阴影图形
2016-05-09 20:09
483 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制带阴影的图形</title>
<script>
function draw(id){
var c=document.getElementById('canvas');
if(c==null)
return false;
var cxt=c.getContext("2d");
cxt.shadowOffsetX=15;
cxt.shadowOffsetY=15;
cxt.shadowColor="aqua";
cxt.shadowBlur=15;
cxt.fillStyle="yellow";
cxt.fillRect(20,20,150,100);
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="300" style="border:1px solid blue;"></canvas>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制带阴影的图形</title>
<script>
function draw(id){
var c=document.getElementById('canvas');
if(c==null)
return false;
var cxt=c.getContext("2d");
cxt.shadowOffsetX=15;
cxt.shadowOffsetY=15;
cxt.shadowColor="aqua";
cxt.shadowBlur=15;
cxt.fillStyle="yellow";
cxt.fillRect(20,20,150,100);
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="300" style="border:1px solid blue;"></canvas>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5基础入门教程
- Html5 上传图片
- H5--实现“扫描指纹”进入下一页效果
- HTML5音频与视频实例（带声音的导航、视频与canvas结合、自制播放器）
- HTML5 -- 使用css3实现简单的响应式布局
- 有趣的HTML5：离线存储
- H5中section和article标签之间的区别
- HTML5之音频与视频
- 认识HTML5的WebSocket
- HTML5之viewport使用
- html5新加哪些特性
- HTML5--》点击显示隐藏内容
- HTML5--》details
- HTML5列表
- HTML5之本地存储
- HTML5样式 链接 表格
- html5图形组合
- html5绘制变换图形-旋转图形
- PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）
- html5绘制渐变图形-图形缩放