<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色在线改变</title>
</head>
<body>
<script>
/* 注意大小写 Color
document.bgColor 背景颜色
.fgColor 字体颜色
.linkColor 链接色
.alinkColor 链接点击时颜色
.vlinkColor 链接点击后的颜色
<canvas>标签 只是图像的容器 必须用脚本绘制图像
getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
fillRect(x,y,w,h) 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
fillStyle
*/
</script>
<script>
function change(form){
console.log(form.text.value);
if(form.text.value == ""){
alert('你喜欢的颜色是？');
}else{
document.bgColor = ("" + form.text.value +" ")
}
}
</script>
<font>请输入颜色编码</font>
<form action="javascript:" onchange="change(this)">
<input type="text" name='text' >
<input type="submit" >
</form>
<br>
<canvas id = 'myCanvas' width='100' height='100' color='red' ></canvas>
<script>
var c = document.getElementById('myCanvas');
var cxt= c.getContext("2d");
//console.log(cxt);
cxt.fillStyle = "#ff0000";
cxt.fillRect(0, 0, 150, 75);
</script>
</body>
</html>
背景颜色在线改变
猜你喜欢
转载自www.cnblogs.com/930115586qq/p/9488933.html
今日推荐
周排行