canvas 畫板
當(dāng)在畫布中备禀，如果按下鼠標(biāo)，我們將畫布的起始點(diǎn)放在此時(shí)鼠標(biāo)的位置感论，用到的是moveTo()绅项，然后鼠標(biāo)移動(dòng)的時(shí)候，用lineTo()畫路徑比肄，用stroke()來(lái)填充路徑快耿，移一下畫一下湿硝，這樣就能畫出曲線來(lái)，當(dāng)鼠標(biāo)抬起的時(shí)候润努，我們只需要取消鼠標(biāo)的動(dòng)作即可，如果你看過(guò)我寫的鼠標(biāo)拖拽效果示括，是不是感覺(jué)很像啊铺浇，對(duì)的，思路跟拖拽是差不多的垛膝，只是具體的內(nèi)容不一樣而已鳍侣。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mycanvas{
border:2px solid #000000;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="500px" height="500px">
對(duì)不起，您的瀏覽器版本過(guò)低吼拥，點(diǎn)擊<a href="javascript:void(0)"></a>
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
canvas.onmousedown = function(ev){
var ev = window.event || ev;
context.beginPath();
var startX = ev.pageX - canvas.offsetLeft-2;
var startY = ev.pageY - canvas.offsetTop-2;
context.moveTo(startX,startY);
canvas.onmousemove = function(ev){
var e = window.event||ev;
var endX = e.pageX - canvas.offsetLeft-2;
var endY = e.pageY - canvas.offsetTop -2;
context.lineTo(endX,endY);
context.strokeStyle="red";
context.lineWidth = 5;
context.stroke();
}
}
canvas.onmouseup = function(){
canvas.onmousemove = null;
}
</script>
</body>
</html>
QQ20171225-210607-HD.gif
矩形
方式一
不能判斷isPointInPath
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.fillRect(100,100,200,100);//isPointInPath 不能判斷
//context.strokeRect(100,100,200,100);
方式二
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(100,100,200,100); // isPointInPath 可以判斷
context.fill();
判斷某個(gè)點(diǎn)是否在上下文圖形里
if(context.isPointInPath(110,110)){
console.log("在圖形內(nèi)")
}else{
console.log("不在圖形內(nèi)")
}
太極
方式一
直接繪制
context.beginPath();
context.arc(250,250,200,Math.PI/2,Math.PI*1.5,false)
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(250,250,200,-(Math.PI/2),Math.PI*0.5,false)
context.fillStyle = "white";
context.fill();
context.beginPath();
context.arc(250,150,100,0,Math.PI*2,false)
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(250,350,100,0,Math.PI*2,false)
context.fillStyle = "white";
context.fill();
context.beginPath();
context.arc(250,150,20,0,Math.PI*2,false)
context.fillStyle = "white";
context.fill();
context.beginPath();
context.arc(250,350,20,0,Math.PI*2,false)
context.fillStyle = "black";
context.fill();
方式二
將上述方式封裝成函數(shù)
function circle(obj,x,y,R,angel1,angel2,color){
obj.beginPath();
obj.arc(x,y,R,angel1,angel2,false)
obj.fillStyle = color;
obj.fill();
}
circle(context,250,250,200,Math.PI/2,Math.PI*1.5,"white")
circle(context,250,250,200,-(Math.PI/2),Math.PI*0.5,"black")
circle(context,250,150,100,0,Math.PI*2,"black")
circle(context,250,350,100,0,Math.PI*2,"white")
circle(context,250,150,20,0,Math.PI*2,"white")
circle(context,250,350,20,0,Math.PI*2,"black")
C2346D3F-1163-414B-82D0-9A89B945447A.png
國(guó)際象棋棋盤
方式一
var Color ="";
for(var i=0;i<8;i++){
for(var j=0;j<8;j++){
if((i%2==0&&j%2==0)||(i%2==1&&j%2==1) ){
Color="#000";
}else{
Color = "#FFF"
}
context.beginPath();
context.fillStyle = Color;
context.fillRect(0+50*i,0+50*j,50,50);
}
}
方式二
var color = "#000";
context.beginPath();
for(var i=0;i<800;i+=200){
for(var j=0;j<800;j+=200){
context.fillRect(i,j,100,100)
context.fillRect(i+100,j+100,100,100)
}
}
4E5D6320-4247-4E0C-94F9-5A22C2E12DA1.png
