<canvas width="800" height="600"></canvas>
複製代碼
width和height不能經過css來設置,不能有單位css
//獲取畫布
var c=document.querySelector("canvas");
//獲取繪製的對象
var ctx=c.getContext("2d");
//設置顏色和width
ctx.strokeStyle = "red";
ctx.lineWidth = 6; // 不須要帶單位
//開始的位置(橫縱座標)
ctx.moveTo(100,100);
ctx.lineTo(50,200);
ctx.lineTo(150,200);
ctx.lineTo(100,100); // 閉合直接lineTo固然能夠
// ctx.closePath();//也能夠採用clothPath閉合路徑,用於畫圖最後一步的合併
//繪製
ctx.stroke();
複製代碼
此時正三角形就畫好了,還能夠設置鏈接處的樣式canvas
從新畫另外線條的時候須要注意一下數組
//再畫一條線
//開始的位置(橫縱座標)
ctx.moveTo(100, 200);
//結束的位置
ctx.lineTo(400, 200);
//設置線的顏色
ctx.strokeStyle = "green";
//設置線的寬度
ctx.lineWidth = 10;
//繪製
ctx.stroke();
複製代碼
一、此時兩次stroke()的繪製會致使第一次的stroke的繪製帶有陰影,那是由於第二次至關於將第一次又進行了臨摹
二、也能夠在每一個畫圖後使用beginPath()重置路徑的方法bash
var c=document.querySelector("canvas");
var ctx=c.getContext("2d");
//建立漸變的方案
//起始位置的橫縱座標,結束位置的橫縱座標
var lgd=ctx.createLinearGradient(100,100,500,100);
//添加漸變的顏色
// addColorStop(offse,color);
// 中漸變的開始位置和結束位置介於0-1之間,0表明開始,1表明結束。中間能夠設置任何小數
lgd.addColorStop(0,"red");
lgd.addColorStop(0.2,"green");
lgd.addColorStop(0.5,"blue");
lgd.addColorStop(1,"yellow");
//把漸變的方案給strokeStyle
ctx.strokeStyle=lgd;
ctx.moveTo(100,100);
ctx.lineTo(500,100);
ctx.lineWidth=20;
ctx.stroke();
複製代碼
//開始的橫縱座標,半徑,結束的橫縱座標,半徑
var rgd=ctx.createRadialGradient(200,150,50,200,150,100);
//添加漸變的顏色
rgd.addColorStop(0,"red");
rgd.addColorStop(0.5,"green");
rgd.addColorStop(1,"blue");
ctx.fillRect(0,0,200,150);
複製代碼
//逆時針繪製外面的矩形
ctx.moveTo(100,100);
ctx.lineTo(100,300);
ctx.lineTo(300,300);
ctx.lineTo(300,100);
ctx.closePath();
//順時針繪製裏面的矩形
ctx.moveTo(150,150);
ctx.lineTo(250,150);
ctx.lineTo(250,250);
ctx.lineTo(150,250);
ctx.closePath();
ctx.stroke();
//中間的區域被填充顏色
ctx.fillStyle="red";
ctx.fill();
複製代碼
ctx.moveTo(100,50);
ctx.lineTo(400,50);
//虛線:參數是一個數組:線的長度是20,空白的地方也是20
//ctx.setLineDash([20,20]);
ctx.setLineDash([10,20,10]);
ctx.stroke();
複製代碼
// 繪製一個矩形
// ctx.fillStyle="green";
// //繪製矩形
// ctx.fillRect(100,100,100,200);
// ctx.stroke();
// 將矩形動起來的思路就是使用setInterval
var x = 0;//開始的座標
//每次移動的步數
var step = 5;
//標記(設置矩形向右移動後再回來)
var i = 1;
setInterval(function () {
//清理畫布 必需要先清理,不然就是重繪
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = "green";//顏色
ctx.fillRect(x, 100, 100, 200);//橫縱座標,寬和高
ctx.stroke();
x += step * i;//控制橫座標的
if (x > c.width - 100) {
i = -1;//標記設置爲-1
} else if (x <= 0) {
i = 1;//i的值,不是x
}
}, 10);
複製代碼
繪製十字線做爲參考
ctx.moveTo(300, 0);
ctx.lineTo(300, 400);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 200);
ctx.lineTo(600,200);
ctx.stroke();
// 開始繪製文本
//繪製文本 :是像素 和字體()
ctx.font="50px 宋體";
//設置文本的對齊方式
ctx.textAlign="center";//left|right|center
//設置文本的上下對齊方式
ctx.textBaseline="middle";//top|bottom|alphabetic(默認)
//設置陰影的顏色
ctx.shadowColor="red";
//水平方向偏移量
ctx.shadowOffsetX=15;
ctx.shadowOffsetY=5;
//陰影的模糊度
ctx.shadowBlur=5;
//參數1:文字內容,參數2:橫座標,參數3;縱座標
//鏤空的效果
// ctx.strokeText("你好",300,200);
//填充文本
ctx.fillText("你好",300,200);
複製代碼
將圖片繪製到畫布的指定位置字體
//繪製圖片
var img=document.createElement("img");
img.src="image/2.jpg";
//圖片和畫圖發生關係,才能夠繪製這個圖片
//圖片加載
img.onload=function () {
//將圖片繪製到畫布的指定位置
content.drawImage(圖片對象,x,y);
ctx.drawImage(img,0,0); // 從畫布的0,0位置開始繪製
//將圖片繪製到指定區域大小的位置 x,y指的是矩形區域的位置,width和height指的是矩形區域的大小
content.drawImage(圖片對象,x,y,width,height);
ctx.drawImage(img,100,100,200,100); // 在規定矩形範圍以內畫圖
//將圖片的指定區域繪製到指定矩形區域內
content.drawImage(圖片對象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
sx,sy 指的是要從圖片哪塊區域開始繪製,swidth,sheight 是值 截取圖片區域的大小
dx,dy 是指矩形區域的位置,dwidth,dheight是值矩形區域的大小
ctx.drawImage(img,180,50,350,170,100,100,350,170); //圖片對象,圖片選擇的橫縱座標,圖片的寬和高,畫圖的橫縱座標,圖片顯示的寬和高
};
複製代碼
// 不失真的公式
var w=img.width
var h=img.height
var drawH=200*h/w
ctx.drarImage(img,100,50,200,drawH)
複製代碼
//繪製弧度:圓心座標,半徑,開始的弧度,結束的弧度,默認順時針(false)
ctx.arc(200,150,50,Math.PI/2,2*Math.PI,false);
ctx.stroke();
複製代碼
//設置畫布原點平移 經過該方法能夠將原點的位置進行從新設置。
ctx.translate(100, 100);
//旋轉的弧度
ctx.rotate( Math.PI/2 );//90度
複製代碼
translate(x,y) 中不能設置一個值動畫
與moveTo(x,y) 的區別:ui
moveTo(x,y) 指的是將畫筆的落筆點的位置改變,而座標系中的原點位置並無發生改變spa
translate(x,y) 是將座標系中的原點位置發生改變code
ctx.scale(2, 0.5);//參數1:相對於原來的橫座標的縮放值,參數2:相對於原來的縱座標的縮放值
複製代碼