【Canvas简易画布制作笔记】

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'