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>
相关文章
|
2月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
119 0
|
2月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
30 0
|
2月前
|
前端开发
Canvas绘画之多边形画板,绘制多边形,携带背景图和绘画功能,带有全部清除的功能,用这个
Canvas绘画之多边形画板,绘制多边形,携带背景图和绘画功能,带有全部清除的功能,用这个
|
4月前
用贝舍尔曲线绘制分段闭合圆环
用贝舍尔曲线绘制分段闭合圆环
25 0
|
4月前
|
监控 API 计算机视觉
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
49 0
|
4月前
|
前端开发
Canvas设置样式无效导致圆变成椭圆的问题研究剖析
Canvas设置样式无效导致圆变成椭圆的问题研究剖析
35 0
|
11月前
|
存储 前端开发
canvas自定义绘制顺序解决遮挡问题
canvas自定义绘制顺序解决遮挡问题
197 0
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )(一)
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )(一)
238 0
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )(一)
|
前端开发 JavaScript
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
274 0