HTML5+CSS3-充实笔记0608

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.bezierCurveTo(50, 100, 200, 100, 200, 150);   //定义贝塞尔曲线坐标
ctx.stroke();

弧线：canvas中并没有直接绘制圆弧的方法，这里是一种变通
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2*Math.PI*0.75);   //设置圆弧坐标
ctx.stroke();

绘制圆形
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2*Math.PI);    //设置圆坐标
ctx.stroke();

绘制三角形
ctx.beginPath();
ctx.moveTo(0,10);   //三角形的起点
ctx.lineTo(200,20);   //第二个点
ctx.lineTo(280, 100);  //第三个点
ctx.closePath();    //第三个点与起点连接
ctx.stroke();  //绘制路径

绘制圆角矩形
ctx.beginPath();               

ctx.moveTo(10, 10);      //左上方开始

ctx.arcTo(100, 10, 100, 20, 10);    //绘制右上方圆角
ctx.arcTo(100, 110, 90, 110, 10);    //绘制右下方圆角
ctx.arcTo(0, 110, 0, 100, 10);    //绘制左下方圆角
ctx.arcTo(0, 10, 10, 10, 10);     //绘制左上方圆角
ctx.stroke();


可以考虑做成自定义函数来画圆角矩形，几个参数( x, y, w, h, r)  起始坐标点，矩形宽、高、圆角半径

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：HTML5 HTML htm begin 自定义函数

为您点赞！

谢谢分享，点赞！

thanks for sharing

谢谢分享

谢谢分享

来学习，为您点赞。