canvas
基本用法
要使用canvas元素，必须设置其width和height属性！并且需要添加一些样式才能在页面上看见。
2d上下文：要在canvas上画图，需要取得绘图上下文(2d)。
通过canvas元素调用getContext（）方法并传入上下文的名字“2d”，就可以获取到2d上下文对象。
通过2d上下文对象调用相关的API就可以在canvas上肆意绘画。
Canvas绘图- JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
全部属性和写法如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
画笔大小：
<button>粗</button>
<button>中</button>
<button>细</button>
<button>橡皮</button>
<button>清屏</button>
<input type="color" id="col" value="#e44444" /><br />
<canvas id="myCanvas" width="900" height="550" style="border: 1px solid red; "></canvas>
<script type="text/javascript">
drow();
function drow(){
var can = document.getElementById("myCanvas");//声明一个变量
if(can.getContext){
var cd = can.getContext("2d");//声明2d环境
var but = document.getElementsByTagName("button");
var a = 1;
var b = 1;
but[0].onclick = function(){
a=10;//这里是第一个画笔
}
but[1].onclick = function(){
a=5;
}
but[2].onclick = function(){
a=1;
}
but[3].onclick = function(){
b+=1
}
but[4].onclick = function(){
cd.clearRect(0,0,900,550);
}
can.onmousedown = function(ev){
var x = ev.clientX-can.offsetLeft;
var y = ev.clientY-can.offsetTop;
cd.beginPath();
cd.moveTo(x,y);
cd.lineWidth = a;
can.onmousemove = function(ev){
if (b%2 == 1) {
var nex = ev.clientX-can.offsetLeft;//移动后的新点
var ney = ev.clientY-can.offsetTop;
cd.lineTo(nex,ney);
cd.strokeStyle = col.value;
cd.stroke();
but[3].innerHTML = "橡皮"
} else{
but[3].innerHTML = "铅笔"
var nex = ev.clientX-can.offsetLeft;//移动后的新点
var ney = ev.clientY-can.offsetTop;
cd.clearRect(nex,ney,10,10);
}
}
can.onmouseup = function(){
can.onmousemove = null;
}
}
}
}
</script>
</body>
</html>
谨记当初奋斗的自己,是他让现在的自己,享受美好, 敬给还在奋斗的你们,望与君共勉.
时间： 2024-10-12 21:23:08