畫布元素
canvash5新增
canvas地址
瀏覽器的坐標(biāo)
直線
<body>
<canvas id="line" style="background-color: pink"></canvas>
<script type="text/javascript">
// 獲取畫布元素
var line = document.getElementById('line')
// 獲取工具集
var cxt = line.getContext("2d")
// 定位開始點
cxt.moveTo(22, 22)
// 拖動并結(jié)束點
cxt.lineTo(102, 22)
// 繪制
cxt.stroke()
</script>
</body>
三角形
<body>
<canvas id="line" style="background-color: pink"></canvas>
<script type="text/javascript">
// 獲取畫布元素
var line = document.getElementById('line')
// 獲取工具集
var cxt = line.getContext("2d")
// 定位點
cxt.moveTo(20, 20)
cxt.lineTo(150, 20)
cxt.lineTo(80, 80)
cxt.closePath()
// 繪制
cxt.stroke()
</script>
</body>
改變線條顏色
// 設(shè)置線條顏色
cxt.strokeStyle='red';
// 設(shè)置線條寬度
cxt.lineWidth=5;
改變每根線條的顏色圈澈， 重復(fù)此過程，把三根線連一起即可
// 設(shè)置顏色
cxt.strokeStyle='red';
cxt.moveTo(20, 20)
cxt.lineTo(150, 20)
// 繪制
cxt.stroke()
// 重置當(dāng)前路徑
cxt.beginPath();
文字
<body>
<canvas id="cvs" style="background-color: pink"></canvas>
<script type="text/javascript">
// 獲取畫布元素
var cvs = document.getElementById('cvs')
// 獲取工具集
var context = cvs.getContext("2d")
// 文字樣式
context.font='bold 30px sans-serif';
// 繪制文字
context.fillText('text', 30, 30);
context.strokeText('text', 30, 90);
</script>
</body>
兩者區(qū)別
文字對齊脐往，文字對齊的坐標(biāo)軸庐氮，是相對于文字繪制的坐標(biāo)的
context.textAlign='right';
context.textBaseline='middle';
將canvas圖形輸出到控制臺
var imgUrl = cvs.toDataURL();
console.log(imgUrl)
矩形
<body>
<canvas id="cvs" style="background-color: pink"></canvas>
<script type="text/javascript">
// 獲取畫布元素
var cvs = document.getElementById('cvs')
// 獲取工具集
var context = cvs.getContext("2d")
// 1.繪制路徑
// context.rect(30, 30, 50, 50);
// 2.描邊或填充
// context.stroke();
// context.fill()
// 調(diào)用一次方法完成
// context.strokeRect(30, 30, 50, 50);
context.fillRect(30, 30, 50, 50);
// 清空矩形內(nèi)像素
context.clearRect(30, 30, 50, 50);
</script>
</body>
圓
// 繪制圓
context.arc(50, 50, 40,0, Math.PI / 180 * 360, true);
// context.stroke();
context.fill();
圖片
// 定義圖片對象
var img = new Image()
img.src='./img/dog.jpg'
img.onload = function () {
// 繪制圖片
// context.drawImage(this, 10, 10);
// 指定圖片的寬高
// context.drawImage(this, 10, 10, 122, 200);
// 裁切放大圖片
context.drawImage(this, 120, 120, 100, 100, 10, 10, 300, 300);
}
刮刮卡
<body>
<canvas id="cvs"></canvas>
<script type="text/javascript">
// 獲取畫布元素
var cvs = document.getElementById('cvs')
// 獲取工具集
var context = cvs.getContext("2d")
// 1. 定義中獎信息
var randomArr = ['一等獎', '二等獎', '三等獎', '沒有獎']
var random = randomArr[Math.floor(Math.random()*randomArr.length)]
context.font='bold 30px sans-serif';
context.textAlign = 'center'
context.textBaseline='middle';
context.fillStyle='red';
context.fillText(random, cvs.width/2, cvs.height/2);
// 2. 將中獎信息生成為背景圖片，清空畫布,繪制覆蓋的矩形
var imgUrl = cvs.toDataURL('iamge/png',1)
cvs.style.background = 'url('+imgUrl+')'
context.clearRect(0, 0, cvs.width, cvs.height);
context.fillStyle='#666'
context.fillRect(0, 0, cvs.width, cvs.height);
// 3. 實現(xiàn)刮擦的效果
var flag = false
cvs.addEventListener('mousedown', function() {
flag = true
// 將刮擦過的區(qū)域設(shè)置為透明
context.globalCompositeOperation='destination-out';
})
cvs.addEventListener('mousemove', function(e) {
if(flag) {
var x = e.clientX
var y = e.clientY
context.fillRect(x, y, 40, 40)
}
})
cvs.addEventListener('mouseup', function() {
flag = false
})
</script>
</body>
