H5 Canvas制作贝塞尔曲线
摘要：wap前端开发框架|js前端开发视频教程|移动端前端开发与pc端有哪些不同 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title></title&……
wap前端开发框架|js前端开发视频教程|移动端前端开发与pc端有哪些不同
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
#canvas {
position: absolute;
top: 20px;
left: 20px;
/*border: 1px solid darkblue;*/
z-index: 1;
}
#cp1 {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: red;
position: absolute;
top: 160px;
left: 10px;
z-index: 2;
}
#cp2 {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #00BFFF;
position: absolute;
top: 460px;
left: 310px;
z-index: 2;
}
</style>
</head>
<body>
<div id=”cp1″></div>
<div id=”cp2″></div>
<canvas id=”canvas” width=”300″ height=”600″></canvas>
<div id=”text”>
cubic-bezier(0,1,1,0)
</div>
<script type=”text/javascript”>
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
var cp1 = document.getElementById(“cp1”);
var cp2 = document.getElementById(“cp2”);
var textDiv = document.getElementById(“text”);
function drawBack() {
var gradient = ctx.createLinearGradient(0, 0, 0, 600);
gradient.addColorStop(0, “white”);
gradient.addColorStop(0.5, “#ccc”);
gradient.addColorStop(1, “white”);
ctx.beginPath();
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 600);
//白条
ctx.fillStyle = “white”;
for (var i = 150; i < 450; i += 40) {
ctx.beginPath();
ctx.fillRect(0, i, 300, 20)
}
//x轴
ctx.beginPath();
ctx.strokeStyle = “black”;
ctx.lineWidth = 1;
ctx.moveTo(0, 450);
ctx.lineTo(300, 450);
ctx.stroke();
//y轴
ctx.beginPath();
ctx.moveTo(1, 450);
ctx.lineTo(1, 150);
ctx.stroke();
}
function drawLine() {
ctx.clearRect(0, 0, 300, 600);
drawBack();
ctx.beginPath();
ctx.strokeStyle = “black”;
ctx.lineWidth = 5;
ctx.moveTo(0, 450);
ctx.bezierCurveTo(cp1.offsetLeft – 10, cp1.offsetTop – 10, cp2.offsetLeft – 10, cp2.offsetTop – 10, 300, 150);
ctx.stroke();
//连线1
ctx.beginPath();
ctx.moveTo(cp1.offsetLeft – 10, cp1.offsetTop – 10);
ctx.lineTo(0, 450);
ctx.lineWidth = 2;
ctx.stroke();
//连线2
ctx.beginPath();
ctx.moveTo(cp2.offsetLeft – 10, cp2.offsetTop – 10);
ctx.lineTo(300, 150);
ctx.stroke();
drawText();
}
//写字
function drawText() {
var p1X = ((cp1.offsetLeft – 10) / 300).toFixed(2);
var p1Y = ((450 – (cp1.offsetTop – 10)) / 300).toFixed(2);
var p2X = ((cp2.offsetLeft – 10) / 300).toFixed(2);
var p2Y = ((450 – (cp2.offsetTop – 10)) / 300).toFixed(2);
textDiv.innerHTML = “cubic-bezier(” + p1X + “,” + p1Y + “,” + p2X + “,” + p2Y + “)”;
}
cp1.onmousedown = function () {
document.onmousemove = function (e) {
var ev = e || window.event;
var x = ev.clientX;
var y = ev.clientY;
if (x < 20) {
x = 20;
}
if (x > 320) {
x = 320
}
cp1.style.left = (x – 10) + “px”;
cp1.style.top = (y – 10) + “px”;
drawLine();
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
cp2.onmousedown = function () {
document.onmousemove = function (e) {
var ev = e || window.event;
var x = ev.clientX;
var y = ev.clientY;
if (x < 20) {
x = 20;
}
if (x > 320) {
x = 320;
}
cp2.style.left = (x – 10) + “px”;
cp2.style.top = (y – 10) + “px”;
drawLine();
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
drawLine()
</script>
</body>
</html>
游戏前端开发框架下载|硬件前端开发视频教程|移动前端开发就业前景
» 本文来自：前端开发者 » 《H5 Canvas制作贝塞尔曲线》
» 本文链接地址：https://www.rokub.com/5176.html
» 您也可以订阅本站：https://www.rokub.com
近期评论