Canvas 实现一个画板
Canvas 实现一个画板
<canvas> 是HTML5的新标签，它是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素。
css样式：
<style>
canvas {
border: 1px solid red;
}
</style>
body添加canvas标签 以及画笔的样式：
[precode] <canvas></canvas>
<br>
粗细
<select class="width">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
颜色
<input class="color" type="color">[/precode]
js代码：
获取canvas
var canvas = document.querySelector('canvas')
画笔粗细
var width = document.querySelector('.width')
画笔颜色
var color = document.querySelector('.color')
清除画板
var clear = document.querySelector('.clear')
给画布设置宽高：
canvas.height = '300'
canvas.width = '300'
获取工具箱：
var ctx = canvas.getContext('2d')
绘制圆形的结束线帽：
ctx.lineCap = "round";
按下画笔
适配触摸屏
先声明一个标志变量
然后用户按下鼠标，就让这个变量变成 true，在painting === true 的情况下，我们才画线
let painting = false
let last
触摸板适配：
[precode]let isTouchDevice = 'ontouchstart' in document.documentElement;
if (isTouchDevice) {
canvas.ontouchstart = (f) => {
let x = f.touches[0].clientX
let y = f.touches[0].clientY
last = [x, y]
}
canvas.ontouchmove = (f) => {
let x = f.touches[0].clientX
let y = f.touches[0].clientY
drawLine(last[0], last[1], x, y)
last = [x, y]
}
}[/precode]
pc：
[precode]else {
canvas.addEventListener('mousedown', function (e) {
var x = e.offsetX;
var y = e.offsetY;
ctx.beginPath();
function move(event) {
ctx.lineTo(event.offsetX, event.offsetY);
ctx.lineWidth = width.value;
ctx.strokeStyle = color.value;
ctx.stroke();
}
canvas.addEventListener('mousemove', move)
canvas.addEventListener('mouseup', function () {
canvas.removeEventListener('mousemove', move)
})
})
}[/precode]
触摸端线路封装函数：
[precode]function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.closePath();
ctx.stroke();
}[/precode]
全部代码：
[precode]</head>
<style>
canvas {
border: 1px solid red;
}
</style>
<body>
<canvas></canvas>
<br>
粗细
<select class="width">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
颜色
<input class="color" type="color">
<button class="clear">清空画板</button>
<script>
//获取canvas
var canvas = document.querySelector('canvas')
//画笔粗细
var width = document.querySelector('.width')
//画笔颜色
var color = document.querySelector('.color')
//清除画板
var clear = document.querySelector('.clear')
canvas.height = '300'
canvas.width = '300'
//获取工具箱F
var ctx = canvas.getContext('2d')
//绘制圆形的结束线帽：
ctx.lineCap = "round";
//按下画笔
//适配触摸屏
// 先声明一个标志变量
// 然后用户按下鼠标，就让这个变量变成 true，在painting === true 的情况下，我们才画线
let painting = false
let last
let isTouchDevice = 'ontouchstart' in
document.documentElement;
if (isTouchDevice) {
canvas.ontouchstart = (f) => {
let x = f.touches[0].clientX
let y = f.touches[0].clientY
last = [x, y]
}
canvas.ontouchmove = (f) => {
let x = f.touches[0].clientX
let y = f.touches[0].clientY
drawLine(last[0], last[1], x, y)
last = [x, y]
}
} else {
canvas.addEventListener('mousedown', function (e) {
var x = e.offsetX;
var y = e.offsetY;
ctx.beginPath();
function move(event) {
ctx.lineTo(event.offsetX, event.offsetY);
ctx.lineWidth = width.value;
ctx.strokeStyle = color.value;
ctx.stroke();
}
canvas.addEventListener('mousemove', move)
canvas.addEventListener('mouseup', function () {
canvas.removeEventListener('mousemove', move)
})
})
}
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.closePath();
ctx.stroke();
}
</script>
</body>
[/precode]
共有 0 条评论