<style>
.operation{
width: 500px;
padding-left: 40px;
}
</style>
<body>
<canvas width="500" height="500" style="border:1px solid red; border-radius: 20px;"></canvas>
<div class="operation">
<!--选择指定颜色-->
<input type="color" id="colorList">
<a href="javaScript:;" class="changeColor">点击切换随机颜色</a>
<button class="add">加粗</button>
<input id="bolderd" size="1" type="text">
<button class="remove">变细</button>
<button id="clear">清空</button>
</div>
<script>
//调整字体粗细
let add=document.querySelector('.add')
let remove=document.querySelector('.remove')
bolderd.value=4;
let commond=4;
add.οnclick=function(){
if(Number(bolderd.value)===10) return;
bolderd.value=Number(bolderd.value)+2;
commond=bolderd.value;
};
remove.οnclick=function(){
if(Number(bolderd.value)===2) return;
bolderd.value-=2
commond=bolderd.value;
};
let changeColor=document.querySelector('.changeColor');
let str=''
//设置随机颜色
changeColor.οnclick=function(e){
str=''
let arr=[1,2,3,4,5,5,6,7,8,9,'a','b','c','d','e','f']
for(let i=0;i<6;i++){
str+=arr[Math.floor(Math.random()*16)]
}
console.log(str);
e.preventDefault()
};
//1.获取canvas的DOM对象
var canvas=document.getElementsByTagName('canvas')[0]
//2.获取上下文对象context
let ctx=canvas.getContext('2d');
let strokeColor='#000';
//颜色面板选择颜色
colorList.οnchange=function(){
str=this.value.substr(1);
};
//3.鼠标按下事件
canvas.οnmοusedοwn=function (ev) {
//初始化笔触的颜色跟大小
ctx.strokeStyle='#'+str;
console.log(str);
ctx.lineWidth=commond;
ctx.beginPath();
//移动触笔的位置
ctx.moveTo(ev.offsetX,ev.offsetY);
//4.鼠标移动事件
canvas.οnmοusemοve=function(ev){
ctx.lineTo(ev.offsetX,ev.offsetY);
ctx.stroke()
};
//松开鼠标删除事件触发
document.οnmοuseup=function (ev) {
canvas.οnmοusemοve=null;
canvas.οnmοuseup=null;
}
}
//清空画板内容
clear.οnclick=function (){
ctx.clearRect(0,0,500,500)
}
</script>
</body>
Processed:
0.019, SQL:
9
