思享工具箱

canvas中剪辑、阴影以及曲线的绘制

摘要：
DOCTYPEhtml˃canvas。画布｛border:1pxsolid#abcdef；背景色：#a9add2；｝您的浏览器不支持canvasvarcanvas=document。按ID获取元素；varctx=画布。getContext；//上下文，绘图环境//在矩形弧的右上角绘制一个圆ctx；//剪裁区域//稍后绘制的所有图形都将在该原型区域中绘制，多余的部分将被剪裁成ctx。clip（）；ctx。fillStyle=“粉色”；//绘制矩形ctx。fillRect//绘制一个圆ctx。fillStyle=“#abcdef”；ctx。beginPath（）；ctx。弧；ctx。fill（）；取消区域剪辑，并使用保存和还原˂！

区域剪辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //在矩形右上角绘制一个圆
        ctx.arc(300,100,200,0,2*Math.PI,true);
        //进行区域剪辑
        //后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑
        ctx.clip();

        ctx.fillStyle="pink";
        //绘制矩形
        ctx.fillRect(100,100,200,200);
       
    
    </script>
</body>
</html>

canvas中剪辑、阴影以及曲线的绘制第1张

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //在矩形右上角绘制一个圆
        ctx.arc(300,100,200,0,2*Math.PI,true);
        //进行区域剪辑
        //后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑
        ctx.clip();

        ctx.fillStyle="pink";
        //绘制矩形
        ctx.fillRect(100,100,200,200);

        //再绘制一个圆
        ctx.fillStyle="#abcdef";
        ctx.beginPath();
        ctx.arc(400,300,100,0,2*Math.PI,true);
        ctx.fill();
       
    
    </script>
</body>
</html>

canvas中剪辑、阴影以及曲线的绘制第2张

取消区域剪辑，使用save和restore

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.save();

        //在矩形右上角绘制一个圆
        ctx.arc(300,100,200,0,2*Math.PI,true);
        //进行区域剪辑
        //后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑
        ctx.clip();

        ctx.fillStyle="pink";
        //绘制矩形
        ctx.fillRect(100,100,200,200);

        ctx.restore();
        
        //再绘制一个圆
        ctx.fillStyle="#abcdef";
        ctx.beginPath();
        ctx.arc(400,300,100,0,2*Math.PI,true);
        ctx.fill();
       
    
    </script>
</body>
</html>

canvas中剪辑、阴影以及曲线的绘制第3张

绘制四色圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //绘制一个圆
        ctx.arc(300,200,100,0,2*Math.PI,true);
        //进行区域剪辑
        //后面绘制的所有图形都会在这个原型区域内绘制，超出部分被剪辑
        ctx.clip();

        ctx.fillStyle="pink";
        //绘制矩形
        ctx.fillRect(200,100,300,200);

        ctx.fillStyle="lightgreen";
        //绘制矩形
        ctx.fillRect(300,100,400,200);

        ctx.fillStyle="#abcdef";
        //绘制矩形
        ctx.fillRect(200,200,300,300);

        ctx.fillStyle="orange";
        //绘制矩形
        ctx.fillRect(300,200,400,300);
       
    
    </script>
</body>
</html>

canvas中剪辑、阴影以及曲线的绘制第4张

阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.fillStyle="pink";
        //阴影x轴偏移
        ctx.shadowOffsetX=10;
        //阴影y轴偏移
        ctx.shadowOffsetY=10;
        //阴影颜色
        ctx.shadowColor="rgba(0,0,0,.2)";
        //模糊程度
        ctx.shadowBlur=1;
        //绘制矩形
        ctx.fillRect(100,100,100,100);

    
    </script>
</body>
</html>

canvas中剪辑、阴影以及曲线的绘制第5张

文字阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.fillStyle="pink";
        //阴影x轴偏移
        ctx.shadowOffsetX=10;
        //阴影y轴偏移
        ctx.shadowOffsetY=10;
        //阴影颜色
        ctx.shadowColor="rgba(0,0,0,.2)";
        //模糊程度
        ctx.shadowBlur=1;
        //绘制矩形
        ctx.fillRect(100,100,100,100);
        //绘制文字
        ctx.font="20px sans-serif";
        ctx.fillText("cyy呀",300,300);

    
    </script>
</body>
</html>

canvas中剪辑、阴影以及曲线的绘制第6张

补充一下，设置文字的大小，这个ctx.font中，必须要加字体

我刚开始只是单纯设置了20px，发现是不生效的

必须加上字体如sans-serif才可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.fillStyle="pink";
        //阴影x轴偏移
        ctx.shadowOffsetX=10;
        //阴影y轴偏移
        ctx.shadowOffsetY=10;
        //阴影颜色
        ctx.shadowColor="rgba(0,0,0,.2)";
        //模糊程度
        ctx.shadowBlur=1;
        //绘制矩形
        ctx.fillRect(100,100,100,100);
        //绘制文字
        ctx.font="20px sans-serif";
        ctx.fillText("cyy呀",300,300);
        ctx.fillText("小仙女",100,300);

    
    </script>
</body>
</html>

canvas中剪辑、阴影以及曲线的绘制第7张

绘制曲线

圆弧的绘制 arc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.arc(200,200,50,0,Math.PI/2,true);//逆时针
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(400,200,50,0,Math.PI/2,false);//顺时针
        ctx.stroke();

    
    </script>
</body>
</html>

canvas中剪辑、阴影以及曲线的绘制第8张

二次贝塞尔曲线生成工具：

http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html

三次贝塞尔曲线生成工具

http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

二次贝塞尔曲线由三个点完成

canvas中剪辑、阴影以及曲线的绘制第9张

 最左边的点对应的是moveTo的坐标

中间的点对应的是quadraticCurveTo的第一个坐标点参数

最右边的点对应的是quadraticCurveTo的第二个坐标点参数

三次贝塞尔曲线由4个点完成

canvas中剪辑、阴影以及曲线的绘制第10张

最左边的点对应的是moveTo的坐标

第一个柄对应的是quadraticCurveTo的第一个坐标点参数

第二个柄对应的是quadraticCurveTo的第二个坐标点参数

最右边的点对应的是quadraticCurveTo的第三个坐标点参数

标签：#canvas | 浏览：126 | 发布日期：

免责声明：文章转载自《canvas中剪辑、阴影以及曲线的绘制》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇一个关于vue+mysql+express的全栈项目（二）------ 前端构建KVM(三)I/O 全虚拟化和准虚拟化下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

html2canvas + jsPDF 导出PDF，解决一半文字在上一页一半文字在下一页的问题

html页面转pdf下载 两个js文件可供使用，地址如下： https://github.com/linwalker/render-html-to-pdf 唯一的缺点是图片跨页不好解决，最终的pdf文件如下：   解决下载pdf文件背景是黑色的问题，将div添加背景色为白色，未解决图片跨页问题，解决思路： 通过控制页面html页面元素，控制元素位置，当...

canvas实现平铺水印

欲实现的水印平铺的效果图如下： 从图上看，应该做到以下几点： 文字在X和Y方向上进行平铺； 文字进行了一定的角度的旋转； 水印作为背景，其z-index位置应位于页面内容底部, 即不能覆盖页面主内容； 平铺的水印应能随窗口大小改变进行自适应。 思路： 首先我们先在canvas上绘制如下图所示一小块画布： var tpl = '<canvas...

vue 图片下载到本地，图片保存到本地

  必须同源（访问的网站域名与服务器域名一致）才能下载 1 2 3 4 5 6 downs() {   var alink = document.createElement("a");   alink.href = this.shop.shoppic_url;   alink.download = "pic"; //图片名   al...

有关Canvas的一点小事—canvas数据和像素点

1、  canvas生成base64数据 canvas.toDataURL()生成的数据可以直接给image对象使用作为<img>显示在前端，也可以传给后台生成图片保存。前端生成保存图片的好像也有，但是比较麻烦，而且不兼容。我记得zip.js就可以在前端打包图片生成压缩包，不过我现在用不到，哪天想到了再整理整理。 　　　　　　　　 　　　　　　...

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .

1、首先说一下canvas类： Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw ca...

uni-app中使用Echarts绘画图表

enmnm...一般会使用npm下载echarts这个包，但是不知道是我自己的配置问题还是别的原因，一直出不来图线， 于是，把Hello uni-app模板里的那个组件抱过来，然后，成了！ 首先， 1、页面引入 <template> <view class="container">...

最新文章

随机推荐

思享工具箱导航