Canvas绘画之三条二次方贝塞尔曲线构成的复选框标记对号

简介: Canvas绘画之三条二次方贝塞尔曲线构成的复选框标记对号

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对勾,二次方贝塞尔曲线</title>
</head>
<body>
<p>这是用三条二次方贝塞尔曲线构成的复选框标记对号<input type="checkbox" checked></p>
 
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');
 
    context.strokeStyle = '#3aa112';
 
    context.shadowColor = 'rgba(50,50,50,1.0)';
    context.shadowOffsetX = 3;
    context.shadowOffsetY = 3;
    context.shadowBlur = 4;
 
    context.lineWidth=20;
    context.lineCap='round';
 
    context.beginPath();
    //设定开始点(120.5,130)
    context.moveTo(120.5,130);
    //设定控制点(150.8,130)和结束点(160.6,150.5);
    context.quadraticCurveTo(150.8,130,160.6,150.5);
    context.quadraticCurveTo(190,250,210.5,160.5);
    context.quadraticCurveTo(240,100.5,290,70.5);
 
    context.stroke();
</script>
</html>
相关文章
|
5月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(15)形状连线(ShapeLink)四种类型(直线、正交、二次贝塞尔、三次贝塞尔)
本文介绍了Twaver HTML5中的形状连线(ShapeLink),包括如何使用它以及如何添加控制点。文章详细解释了ShapeLink支持的四种连线类型:直线(lineto)、正交(orthogonalto)、二次贝塞尔曲线(quadto)和三次贝塞尔曲线(cubicto),并通过示例代码展示了如何在React组件中创建和配置ShapeLink。
76 3
|
7月前
|
前端开发
Canvas绘画之多边形画板,绘制多边形,携带背景图和绘画功能,带有全部清除的功能,用这个
Canvas绘画之多边形画板,绘制多边形,携带背景图和绘画功能,带有全部清除的功能,用这个
|
前端开发 容器
如何利用CSS实现三角形、扇形、聊天气泡框
如何利用CSS实现三角形、扇形、聊天气泡框
229 0
UE虚幻引擎 UTextBlock UMG文本控件超过边界区域以后显示省略号
UE虚幻引擎 UTextBlock UMG文本控件超过边界区域以后显示省略号
260 0
|
9月前
|
数据可视化
QChart多个图布局使坐标轴对齐的方法
QChart多个图布局使坐标轴对齐的方法
243 0
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )(一)
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )(一)
305 0
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )(一)
|
C# 图形学
C#绘制自定义小人
C#绘制自定义小人
|
前端开发 JavaScript
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
325 0
|
前端开发 JavaScript 内存技术
css动画animation绘制向四周扩散的圆圈
css动画animation绘制向四周扩散的圆圈
1437 0
|
iOS开发
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)
149 0
iOS开发 - 渐变导航条升级版(判断滚动的方向和改变方向时的位置)