【Canvas簡易畫布製作筆記】
阿新 • • 發佈：2018-12-17
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'