HTML5中canvas实现矩形颜色渐变
16lz
2021-01-22
<!--<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf-8">
<title>HTML5</title>
<script type="text/javascript" charset = "utf-8">
//这个函数将在页面完全加载后调用
window.onload = function() {
draw();
};
function draw(grad) {
var canvas = document.getElementById('c1');
if (!canvas||! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
/* 指定渐变区域 */
var grad = ctx.createLinearGradient(0,0, 0,140);
/* 指定几个颜色 */
grad.addColorStop(0,'rgb(216, 9, 0)'); //
grad.addColorStop(0.5,'rgb(225, 255, 0)'); // 绿
grad.addColorStop(1,'rgb(42, 231, 0)'); //hong
/* 将这个渐变设置为fillStyle */
ctx.fillStyle = grad;
/* 绘制矩形 */
ctx.rect(10,10,20,140);
ctx.fill();
// ctx.fillRect(0,0, 140,140);
}
</script>
</head>
<body>
<canvas width = "400" height = "200" id = "c1" style = "border:black 1px solid;">
<!--如果浏览器不支持则显示如下字体-->
提示：你的浏览器不支持<canvas>标签
</canvas>
</body>
</html>
更多相关文章
- html 加上readonly后在各种浏览器的差异。
- HTML5 标签audio添加网页背景音乐代码
- 我无法在某些Web浏览器中输入我的注册文本字段
- AngularJS使用双向数据绑定将img元素标签中的图像显示为源？
- HTML5视频标签使用时注意事项
- （转）让所有浏览器支持HTML5 video视频标签
- HTML：关于a标签的target属性
- 解决FCKEditor编辑器在浏览器返回时显示html源代码的问题
- 【css】a标签的用法