【Canvas简易画布制作笔记】

时间：2018-12-18 01:06:37 阅读：144 评论：0 收藏：0 [点我收藏+]

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简易画布制作笔记】

原文：https://www.cnblogs.com/65Seeker/p/10129222.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)