當設置canvas的寬度和高度時,只有內嵌css有效,外部css會出現拉伸的情況,例如: 顯示情況如下: 該效果與我們預想的不同,此時有兩種修改方案: (1)在代碼js中添加設置寬高屬性的代碼設置寬度和高度: (2)除去外部css中設置寬高屬性的代碼,給canvas標簽直接添加寬度和高度屬性: 最後 ...
1.canvas 標簽
<canvas> <span>不支持canvas標簽</span> </canvas>
2.繪製環境: getContext('2d') //目前支持2d的場景
3.繪畫方塊:(1) fillRect(L,T,W,H) //預設顏色是黑色
(2) strokeRect(L,T,W,H) //帶邊框的方塊(預設一像素黑色邊框,但是由於邊框開始位置為一個像素點的1/2+相鄰像素點的1/2,所以會顯示2像素,解決辦法:top值和left值增加0.5個像素)
註:(1)和(2)順序不同那麼繪製的方塊也不同
(3) 當使用 fillRect(L,T,W,H) 設置canvas的寬度和高度時,只有內嵌css有效,外部css會出現拉伸的情況,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var canvas=document.getElementById('canvas').getContext('2d');
canvas.fillRect(50,50,50,50);
}
</script>
<style>
body{
background: #000;
}
#canvas{
width: 300px;
height: 400px;
background:#fff;
}
</style>
</head>
<body>
<canvas id="canvas">
<span>不支持canvas標簽</span>
</canvas>
</body>
</html>
顯示情況如下:
該效果與我們預想的不同,這是因為標簽中的寬高是畫布中的真正寬度和高度,樣式中的寬高等比例縮放,此時有兩種修改方案:
①在代碼js中添加設置寬高屬性的代碼設置寬度和高度:
canvas.setAttribute("height",canvas.clientHeight);
canvas.setAttribute("width",canvas.clientWidth);
②除去外部css中設置寬高屬性的代碼,給canvas標簽直接添加寬度和高度屬性:
<canvas id="canvas" width="300" height="400" style="background:#fff;"> <span>不支持canvas標簽</span> </canvas>
最後顯示效果如下:
4.設置繪圖,邊界繪製:
window.onload=function(){
var canvas=document.getElementById('canvas').getContext('2d');
canvas.fillStyle='red'; //填充顏色(繪製canvas是有順序的)
canvas.lineWidth=10; //線高度(數值)
canvas.strokeStyle='blue';//邊線顏色
canvas.lineJoin='round'; //邊界連接點樣式,屬性值:miter(預設),round(圓角),bevel(斜角)
// lineCap //端點樣式,一條線的兩個端點,屬性值:butt(預設),round(圓角),square(高度多出為寬一半的值)
canvas.fillRect(50,50,100,100);
canvas.strokeRect(50.5,50.5,100,100);
}
6.繪圖路徑:
window.onload=function(){ var canvas=document.getElementById('canvas').getContext('2d');
canvas.fillStyle='red'; canvas.beginPath(); //開始繪製路徑 canvas.moveTo(100,200); //移動到繪製路徑的新目標點 canvas.lineTo(100,300); //新的目標點 canvas.lineTo(200,300); //新的目標點 canvas.closePath(); //結束繪製路徑,閉合(起點和終點連接)
canvas.stroke(); //畫線
canvas.beginPath();
canvas.rect(10,10,100,100);//矩形區域
canvas.closePath();
ccanvas.fill();
canvas.clearRect(10,10,100,100);//清除畫布中的矩形區域
canvas.save();//保存路徑
//相當於函數,寫在這中間的代碼相當於局部變數,不會影響外部屬性值
canvas.restore();//恢復路徑
}
7.[ 案例 ] 滑鼠畫線
window.onload=function(){
var canvas=document.getElementById('canvas')
var ctx=canvas.getContext('2d');
canvas.onmousedown=function(ev){
var ev= ev || window.event;
ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
document.onmousemove=function(ev){
var ev= ev || window.event;
ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
ctx.stroke();
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
}
