【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'