canvas基础学习(二)-填充样式(线性渐变和径向渐变)
2016-05-30 10:15
429 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>线性渐变</title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;"> 你当前的浏览器不支持canvas,请更换浏览器再试。 </canvas> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); //var linearGrad = context.createLinearGradient(0, 0, 800, 0);//竖直渐变 //var linearGrad = context.createLinearGradient(0, 0, 0, 600);//水平渐变 var linearGrad = context.createLinearGradient(0, 0, 400, 300);//对角线渐变到(400,300)这个坐标 linearGrad.addColorStop(0.0, 'white'); linearGrad.addColorStop(0.25, 'yellow'); linearGrad.addColorStop(0.5, 'green'); linearGrad.addColorStop(0.75, 'blue'); linearGrad.addColorStop(1.0, 'black'); context.fillStyle = linearGrad; context.fillRect(0, 0, 800,600); } </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
你当前的浏览器不支持canvas,请更换浏览器再试。
</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
//var linearGrad = context.createLinearGradient(0, 0, 800, 0);//竖直渐变
//var linearGrad = context.createLinearGradient(0, 0, 0, 600);//水平渐变
var radialGrad = context.createRadialGradient(400, 300, 0, 400, 300, 400);//对角线渐变到(400,300)这个坐标
radialGrad.addColorStop(0.0, 'white');
radialGrad.addColorStop(0.25, 'yellow');
radialGrad.addColorStop(0.5, 'green');
radialGrad.addColorStop(0.75, 'blue');
radialGrad.addColorStop(1.0, 'black');
context.fillStyle = radialGrad;
context.fillRect(0, 0, 800,600);
}
</script>
</body>
</html>
相关文章推荐
- 链接 <a> 的CSS伪类不起作用
- css
- Flexbox-CSS3弹性盒模型flexbox完整版教程
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- web项目中url-pattern改成'/'后,js、css、图片等静态资源(404)无法访问问题解决办法
- css权威指南--笔记(必看)
- C1 WPF C1FlexGrid设置样式技巧:单元格设置背景色
- CSS3实现三角小图标
- CSS背景图拉伸自适应尺寸,全浏览器兼容
- CSS3 Transform 【3D 】
- CSS3 perspective 属性
- maxiang.io css
- CSS3盒模型温故
- 用div和css样式控制页面布局
- 用div和css样式控制页面布局
- 用div和css样式控制页面布局
- 用div和css样式控制页面布局
- JAVA WEB <s:form>提交样式改变,不受控制
- 关于团队合作的css命名规范
- absolute与relative