canvas仿写贝塞尔曲线的示例代码
需积分: 6 118 浏览量
2020-09-27
23:11:44
上传
评论
收藏 50KB PDF 举报
canvas仿写贝塞尔曲线的示例代码仿写贝塞尔曲线的示例代码
主要介绍了canvas仿写贝塞尔曲线的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一
起跟随小编过来看看吧
天正在等烟雨，而我在等你，啦啦啦，欢迎关注我的简书，今天分享的是原创的canvas仿写贝塞尔曲线方法。具体如下：
效果图：
html
<canvas id="mycanvas" width="500" height="500">您的浏览器不支持canvas</canvas>
css
canvas{ border: 1px solid black;}
js
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var x1 = 100;
var y1 = 100;
var x2 = 400;
var y2 = 400;
draw();
function draw(){
//画半透明的线
context.beginPath();
context.moveTo(500,0);
context.lineTo(0,500);
context.strokeStyle = "rgba(0,0,0,0.3)";
context.lineWidth = 10;
context.stroke();
//画连接线
context.beginPath();
context.moveTo(0,500);
context.lineTo(x1,y1);
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(500,0);
context.lineTo(x2,y2);
评论0
最新资源