【Canvas簡易畫布制作筆記】
阿新 • • 發佈：2018-12-18
div download 畫圓 nbsp new str nsf tex 筆記 JS增加類的樣式：ID.classList.add(‘className‘)
CSS SVG fill
context.fillStyle = ‘black‘
transform: scale(1.2)
JS設置默認樣式
context.clearRect(0, 0, yyy.width, yyy.height)
var yyy = document.getElementById(‘xxx‘);
var context = yyy.getContext(‘2d‘);
獲取屏幕寬高
var pageWidth = document.documentElement.clientWidth
var pageHeight = document.documentElement.clientHeight
畫圓
function drawCircle(x, y, radius) {
context.beginPath()
context.arc(x, y, radius, 0, Math.PI * 2);
context.fill()
}
畫線
function drawLine(x1, y1, x2, y2) {
context.beginPath();
context.moveTo(x1, y1) // 起點
context.lineWidth = lineWidth
context.lineTo(x2, y2) // 終點
context.stroke()
context.closePath()
}
下載按鈕
download.onclick = function(){
var url = yyy.toDataURL("image/png")
var a = document.createElement(‘a‘)
document.body.appendChild(a)
a.href = url
a.download = "picture"
a.target = "_blank"
a.click()
創建元素document.createElement(‘a‘)
將a作為xxx的子元素xxx.appendChild(a)
畫線的顏色設置
context.fillStyle = ‘black‘
context.strokeStyle = ‘black‘
【Canvas簡易畫布制作筆記】