onclick:点击监听事件
平移坐标系统:ctx.translate(*,*);
scale():改变图形大小(即缩放)(它除了改变图形大小之外,还会改变其他属性如线条宽度(即lineWidth)、左上角坐标等)
rotate():旋转函数,通过指定的角度参数使元素相对原点进行旋转
它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。
fillRect(*,*,*,*);:填充一个矩形(若不设置填充颜色,默认为黑色)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>坐标变换</title>
</head>
<body>
<h2>坐标变换</h2>
<canvas id="mc5" width="420" height="320"
style="border:1px solid black"></canvas>
<!--js(点击监听事件onclick)变颜色-->
<div id="show" onclick="change();" style="width:190px;height:200px;background-color:red;"></div>
<script type="text/javascript">
//获取canvas元素对应的DOM对象
var canvas=document.getElementById('mc5');
//获取canvas上绘图的CanvasRenderingContext2D对象
var ctx=canvas.getContext('2d');
ctx.fillStyle="rgba(255,0,0,0.3)";
//图形绘制
ctx.translate(30,200);//平移坐标
for(var i=0;i<50;i++){
ctx.translate(50,50);
ctx.scale(0.93,0.93);//改变图形大小(即缩放)(它除了改变图形大小之外,还会改变其他属性如线条宽度(即lineWidth)、左上角坐标等)
ctx.rotate(-Math.PI/10);//旋转函数,通过指定的角度参数使元素相对原点进行旋转
//它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。
ctx.fillRect(0,0,150,75);
}
var change=function(){
var div=
document.getElementById('show');
div.style.backgroundColor=
div.style.backgroundColor=='red'?
'green':(div.style.backgroundColor=='green'?'blue':'red');
}
</script>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200724202044417.png
创建线性渐变:createLinearGradient(*,*,*,*)
创建圆形渐变:createRadialGradient(*,*,*,*,*,*)
向(线性、圆形等)渐变上添加颜色:addColorStop(数值,"颜色")
设置使用(线性、圆形等)渐变作为填充颜色:ctx.fillStyle=lg;
设置使用(线性、圆形等)渐变作为边框颜色:ctx.strokeStyle=lg2;
保存恢复状态:save()
恢复坐标系统:restore()
save()方法将当前的绘图环境压入堆栈顶部
restore()方法将从栈顶部弹出的一组状态信息,并根据此恢复当前绘图环境的各个状态
添加圆弧:ctx.arc(0,0,80,0,Math.PI*2,true);
arc:前两个参数指定圆弧的圆心,第三个参数指定圆弧的半径,第四五个参数用于设角度,结束角度,最后一个参数用于设置是否顺时针旋转
(填充)是在形状内部的内容:fill()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>线性渐变</title>
</head>
<body>
<h2>线性渐变</h2>
<canvas id="mc6" width="520" height="320"
style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('mc6');
var ctx=canvas.getContext('2d');
//save()方法将当前的绘图环境压入堆栈顶部
//restore()方法将从栈顶部弹出的一组状态信息,并根据此恢复当前绘图环境的各个状态
ctx.save();//保存恢复状态
ctx.translate(30,20);
lg=ctx.createLinearGradient(0,0,160,80);//创建线性渐变
lg.addColorStop(0.2,"#f00");//向线性渐变上添加颜色
lg.addColorStop(0.5,"#0f0");
lg.addColorStop(0.9,"#00f");
ctx.fillStyle=lg;//设置使用线性渐变作为填充颜色
ctx.fillRect(0,0,160,80);//填充一个矩形(若不设置填充颜色,默认为黑色)
ctx.restore();//恢复坐标系统
ctx.translate(280,160)//平移坐标系统
ctx.beginPath();
ctx.arc(0,0,80,0,Math.PI*2,true);//添加圆弧
ctx.closePath();
ctx.lineWidth=12;
lg2=ctx.createLinearGradient(-40,-40,80,50);//再次创建线性渐变
lg2.addColorStop(0.1,"#ff0");//向线性渐变上添加颜色
lg2.addColorStop(0.4,"#0ff ");
lg2.addColorStop(0.8,"#f0f");
ctx.strokeStyle=lg2;//设置使用线性渐变作为边框颜色
ctx.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>圆形渐变</title>
</head>
<body>
<h2>圆形渐变</h2>
<canvas id="mc7" width="520" height="320"
style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('mc7');
var ctx=canvas.getContext('2d');
ctx.save();
ctx.translate(30,20);
lg=ctx.createRadialGradient(80,40,5,80,40,60);//创建圆形渐变
lg.addColorStop(0.2,"#f00");//向圆形渐变上添加颜色
lg.addColorStop(0.5,"#0f0");
lg.addColorStop(0.9,"#00f");
ctx.fillStyle=lg;//设置使用圆形渐变作为填充颜色
ctx.fillRect(0,0,160,80);//填充一个矩形
ctx.restore();//恢复坐标系统
ctx.translate(280,160)//平移坐标系统
ctx.beginPath();
ctx.arc(0,0,80,0,Math.PI*2,true);//添加圆弧
ctx.closePath();
ctx.lineWidth=12;
lg2=ctx.createRadialGradient(0,0,5,0,0,80);//再次创建圆形渐变
lg2.addColorStop(0.1,"#ff0");//向圆形渐变上添加颜色
lg2.addColorStop(0.4,"#0ff ");
lg2.addColorStop(0.8,"#f0f");
ctx.fillStyle=lg2;//设置使用圆形渐变作为填充颜色
ctx.fill();//Fill(填充)是在形状内部的内容
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>点击按钮变色</title>
<style>
.text1{
width:400px;
height:38px;
vertical-align:middle;
}
.button{
background:#1E90FF;
face:宋体;
font-size:15;
color:#FFFFFF;
border:none;
width:100px;
height:40px;
margin-left:-40px;
vertical-align:middle;
}
</style>
</head>
<body>
<div>
<input class="text1" type="text" />
<input class="button" type="button" value="百度一下" id="show" onclick="change();" ><!--onclick:点击监听事件-->
<script type="text/javascript">
var change=function(){
var div=document.getElementById("show");
div.style.backgroundColor="#d0d0d0";
}
</script>
</div>
</body>
</html>