canvas练习第2天--剪纸风格海报（无动效）

于 2019-09-17 16:50:15 发布
阅读量299 收藏 1
点赞数
文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/magicmilumilu/article/details/100929900
版权

目录

参考

1.canvas二次贝塞尔曲线闭合填充图形

    //二层
    dtx.beginPath();//一定要有开始
    dtx.moveTo(380,200);
    dtx.quadraticCurveTo(400,400,530,400);
    dtx.lineTo(530,200);
    dtx.lineTo(200,200);
    dtx.closePath();
    dtx.strokeStyle="#319096";
    dtx.stroke();
    dtx.fillStyle="#319096"
    dtx.fill();

2.canvas三次贝塞尔曲线闭合填充图形

    //三层
    dtx.beginPath();
    dtx.moveTo(200,375);
    dtx.bezierCurveTo(280, 345, 350, 320, 530, 320);
    dtx.lineTo(530,200);
    dtx.lineTo(200,200);
    dtx.closePath();
    dtx.strokeStyle="#63aeb3";
    dtx.stroke();
    dtx.fillStyle="#63aeb3"
    dtx.fill();

3.canvas二次+三次贝塞尔曲线闭合填充图形

    //十二层
    dtx.beginPath();
    dtx.moveTo(280,200);
    dtx.bezierCurveTo(340, 280, 380, 220, 440, 280);
    dtx.quadraticCurveTo(480,330,530,360);
    dtx.lineTo(530,200);
    dtx.lineTo(200,200);
    dtx.closePath();
    dtx.strokeStyle="#f1ffff";
    dtx.stroke();
    dtx.fillStyle="#f1ffff";
    dtx.fill();

4.canvas图片

    var img=document.getElementById("imgs");
	window.onload = function(){    
    //底图
　　	dtx.drawImage(img,200,200,330,450);
　　}

图例

在这里插入图片描述在这里插入图片描述

成果

下面得那堆剪纸效果偷懒没画，用的原图的，只画了上面那一半的
在这里插入图片描述

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>傻狗</title>
<style type="text/css">
.right{
    float:right;
    width:50%;
    height:1200px;
    background-color:#0f5058;
}
</style>
</head>
<body>
    <div class="right">
        <canvas id="deer" width="700" height="1200"></canvas>
        <img src="deer.jpg" id="imgs" style="display:none"></img>
        <img src="small deer.png" id="png" style="display:none"></img>
    </div>
<script type="text/javascript">
function draw(){
    var d=document.getElementById("deer");
    var dtx=d.getContext("2d");
    var img=document.getElementById("imgs");
    var png=document.getElementById("png");
window.onload = function(){    
    //白色背景
    dtx.fillStyle="white";
    dtx.fillRect(200,200,330,450);
    //底图
    dtx.shadowColor = "rgba(0,0,0,0.5)";
    dtx.shadowOffsetX = 0;
    dtx.shadowOffsetY = 20;
    dtx.shadowBlur = 20;
　　dtx.drawImage(img,200,200,330,450);
    //阴影
    dtx.shadowColor = "rgba(0,0,0,0.3)";
    dtx.shadowOffsetX = 0;
    dtx.shadowOffsetY = 15;
    dtx.shadowBlur = 30;
    //1层
    dtx.beginPath();
    dtx.moveTo(420, 200); //起始点
    var cp1x = 460, cp1y = 420;  //控制点
    var x = 530, y = 430; // 结束点
    //绘制二次贝塞尔曲线
    dtx.quadraticCurveTo(cp1x, cp1y, x, y);
    dtx.lineTo(530,200);
    dtx.closePath();
    dtx.strokeStyle="#0d5f64";
    dtx.stroke();
    dtx.fillStyle="#0d5f64"
    dtx.fill();
    //二层
    dtx.beginPath();
    dtx.moveTo(380,200);
    dtx.quadraticCurveTo(400,400,530,400);
    dtx.lineTo(530,200);
    dtx.lineTo(200,200);
    dtx.closePath();
    dtx.strokeStyle="#319096";
    dtx.stroke();
    dtx.fillStyle="#319096"
    dtx.fill();
    //三层
    dtx.beginPath();
    dtx.moveTo(200,375);
    dtx.bezierCurveTo(280, 345, 350, 320, 530, 320);
    dtx.lineTo(530,200);
    dtx.lineTo(200,200);
    dtx.closePath();
    dtx.strokeStyle="#63aeb3";
    dtx.stroke();
    dtx.fillStyle="#63aeb3"
    dtx.fill();
    //四层
    dtx.beginPath();
    dtx.moveTo(200,380);
    dtx.bezierCurveTo(350, 230, 140, 480, 460, 200);
    dtx.lineTo(200,200);
    dtx.lineTo(200,380);
    dtx.closePath();
    dtx.strokeStyle="#73c8cd";
    dtx.stroke();
    dtx.fillStyle="#73c8cd";
    dtx.fill();
    //五层
    dtx.beginPath();
    dtx.moveTo(230,200);
    dtx.quadraticCurveTo(360,380,530,370);
    dtx.lineTo(530,200);
    dtx.closePath();
    dtx.strokeStyle="#61ccd4";
    dtx.stroke();
    dtx.fillStyle="#61ccd4"
    dtx.fill();    
    //六层
    dtx.beginPath();
    dtx.moveTo(200,280);
    dtx.bezierCurveTo(480, 405, 304, 290, 530, 367);
    dtx.lineTo(530,200);
    dtx.lineTo(200,200);
    dtx.closePath();
    dtx.strokeStyle="#97f0f8";
    dtx.stroke();
    dtx.fillStyle="#97f0f8"
    dtx.fill(); 
    //七层
    dtx.beginPath();
    dtx.moveTo(200,320);
    dtx.quadraticCurveTo(360,300,500,200);
    dtx.lineTo(200,200);
    dtx.closePath();
    dtx.strokeStyle="#affaff";
    dtx.stroke();
    dtx.fillStyle="#affaff"
    dtx.fill(); 
    //八层
    dtx.beginPath();
    dtx.moveTo(470,200);
    dtx.bezierCurveTo(500, 425, 500, 390, 530, 460);
    dtx.lineTo(530,200);
    dtx.closePath();
    dtx.strokeStyle="#96dfe5";
    dtx.stroke();
    dtx.fillStyle="#96dfe5"
    dtx.fill(); 
    //九层
    dtx.beginPath();
    dtx.moveTo(200,300);
    dtx.bezierCurveTo(280, 250, 300, 320, 530, 300);
    dtx.lineTo(530,200);
    dtx.lineTo(200,200);
    dtx.closePath();
    dtx.strokeStyle="#bcf4f7";
    dtx.stroke();
    dtx.fillStyle="#bcf4f7";
    dtx.fill();
    //十层
    dtx.beginPath();
    dtx.moveTo(200,250);
    dtx.bezierCurveTo(360, 220, 380, 420, 530, 250);
    dtx.lineTo(530,200);
    dtx.lineTo(200,200);
    dtx.closePath();
    dtx.strokeStyle="#d2fbfd";
    dtx.stroke();
    dtx.fillStyle="#d2fbfd";
    dtx.fill();
    //十一层
    dtx.beginPath();
    dtx.moveTo(230,200);
    dtx.bezierCurveTo(280, 310, 380, 260, 420, 300);
    dtx.quadraticCurveTo(470,350,530,340);
    dtx.lineTo(530,200);
    dtx.lineTo(200,200);
    dtx.closePath();
    dtx.strokeStyle="#e4feff";
    dtx.stroke();
    dtx.fillStyle="#e4feff";
    dtx.fill();
    //十二层
    dtx.beginPath();
    dtx.moveTo(280,200);
    dtx.bezierCurveTo(340, 280, 380, 220, 440, 280);
    dtx.quadraticCurveTo(480,330,530,360);
    dtx.lineTo(530,200);
    dtx.lineTo(200,200);
    dtx.closePath();
    dtx.strokeStyle="#f1ffff";
    dtx.stroke();
    dtx.fillStyle="#f1ffff";
    dtx.fill();
    //shadow
    dtx.shadowColor = "rgba(0,0,0,0)";
    //鹿
    dtx.drawImage(png,485,200,40,40);
    //文字
    dtx.fillStyle="#0d5f64";
    dtx.font="10px Iskoola Pota";
    dtx.fillText("10 /",445,245);
    dtx.font="25px Iskoola Pota";
    dtx.fillText("5",465,245);
    dtx.font="9px Iskoola Pota";
    dtx.fillText("October 15th",430,257);
    dtx.font="23px Iskoola Pota";
    dtx.fillText("|",483,253);
    dtx.font="8px Iskoola Pota";
    dtx.fillText("星  期  四",490,245);
    dtx.font="9px Iskoola Pota";
    dtx.fillText("Thursday",490,257);
    dtx.beginPath();
    dtx.moveTo(433,263);
    dtx.lineTo(522,263);
    dtx.strokeStyle="#0d5f64";
    dtx.lineWidth=1;
    dtx.stroke();
    dtx.font="7px Iskoola Pota";
    dtx.fillText("—",460,280);    
    dtx.font="7px Iskoola Pota";
    dtx.fillText("不断的好奇",488,274);
    dtx.font="7px Iskoola Pota";
    dtx.fillText("不停的学习",488,286);
}
draw();
</script>
</body>
</html>
SUVI KETTUNEN
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-canvas-poster 海报合成
08-13
2. **Vue computed属性和watcher**：可以用来根据数据变化自动计算新的海报合成参数，例如调整图片大小或位置。 3. **Vue事件处理**：通过`v-on`或`@`指令监听用户交互，如点击按钮保存海报或改变设计元素。 4. **...
Canvas动效
01-05
首先，Canvas是一个二维绘图上下文，允许开发者通过JavaScript来绘制图形、图像、文字等，进而实现丰富的交互性。在Canvas中，所有的绘图操作都是基于像素级别的，这使得它非常适合制作各种动态效果。 Canvas动画的...
2.34 路径方向和剪纸效果｜Canvas高级内容｜Canvas图形、动画、游戏开发从入门到精通全系列课程
08-31
2.34_路径方向和剪纸效果｜Canvas高级内容｜Canvas图形、动画、游戏开发从入门到精通全系列课程
用Canvas制作剪纸效果
andyjbs2016的博客
08-16 532
在做剪纸效果之前，先介绍剪纸效果运用到的一些知识： 阴影 在Canvas之中进行绘制时，可以通过修改绘图环境中的如下4个属性值来指定阴影效果： shadowColor:CSS格式的颜色字串。默认值为rgba(0,0,0,0),即完全透明的黑色。 shadowOffsetX:阴影在X轴方向的偏移量，以像素为单位。默认值为0 shadowOffsetY：阴影在Y轴方向的偏移量，...
canvas - 基础知识 - 绘制剪纸图形
幸福的七种颜色的博客
05-13 508
html代码： <!DOCTYPE html> <html> <head> <title>Sprite sheet</title> <style> body { background: #ddd; } #canvas { positio...
canvas系类-非零坏绕原则（二）制作剪纸效果
汉堡请不要欺负面条
02-27 865
根据canvas系类-非零坏绕原则（一），我们可以制作出剪纸的效果： 分析此图：要得到内图形没有填充的效果，需要最后结果为0，所以我们把外矩形采用顺时针的方向绘制，那矩形内的图形都得采用逆时针绘制，这样就可以。 //1.获取canvas上下文， var dom=document.getElementById("canvas"); canvas.width=800;
绘制剪纸
菜鸟的修炼
05-23 386
绘制剪纸                   var canvas=document.getElementById('canvas');         canvas.width=800;         canvas.height=800;         var context =canvas.getContext('2d');         context.fillS
vue ---- 基于canvas的绘制海报组件
03-04
在这个“vue ---- 基于canvas的绘制海报组件”的项目中，开发者利用 Vue 2.0 版本创建了一个专用于在网页上绘制H5海报的组件。这个组件充分利用了HTML5的Canvas元素，提供了一种灵活的方式来动态生成和定制海报。 ...
水墨画生成canvas动效.rar
最新发布
06-23
水墨画生成canvas动效.rar 水墨画生成canvas动效.rar 水墨画生成canvas动效.rar 水墨画生成canvas动效.rar 水墨画生成canvas动效.rar 水墨画生成canvas动效.rar 水墨画生成canvas动效.rar 水墨画生成canvas动效.rar ...
微信小程序-新版海报分享canvas2d实现（淘宝、京东、拼多多等都在用）
09-04
2、新版canvas2d海报，官方文档比较乱，开发起来难度大。 3、canvas2d生成海报效率高，资源开资少，性能强。 4、普通canvas生成海报比canvas2d稍慢。 5、通过网上方法，进行大量的开发实现，最后封装成的组件。 6、...
PPT精美图表
02-28
上班做PPT之必需品。上班做PPT之必需品。上班做PPT之必需品。上班做PPT之必需品。上班做PPT之必需品。上班做PPT之必需品。上班做PPT之必需品。
HTML5 Canvas生成粒子效果的人物头像
08-23
前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果，HTML5处理图片真的非常简单。今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像，你可以任意选择一张头像图片，接下来该图片会被打散成许多粒子，然后慢慢的重组成图片，鼠标滑过图片时粒子还会出现浮动的动画特效，看上去非常酷。
珍藏精美的PPT背景图片
08-01
108张珍藏精美的PPT背景图片〔绝对好看)(经典简约)方便易学，零基础
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
08-06
NULL 博文链接：https://128kj.iteye.com/blog/2088202
【绘制】HTML5 Canvas 剪纸效果（镂空效果）
苏一恒
08-29 1923
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 圆环剪纸 我们运用所学到的路径、阴影与非零环绕规则等知识，实现如图圆环剪纸(cutout)效果。 这是用JavaScript...
canvas系类-非零坏绕原则（一）
汉堡请不要欺负面条
02-27 798
根据上面的原理，演示画一个环形图的实例 //1.获取canvas上下文， var dom=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var ctx=dom.getContext('2d');//获取canvas上下文的内容 ctx.beginPath(); ctx.
只会直接插入图片到PPT？图片这样处理，PPT的颜值瞬间提升几倍！
佛系软件
11-02 2719
做PPT的时候，只会直接插入图片？其实，图片可以这样处理，处理过的图片可以让PPT的颜值瞬间提升几倍！ 1.艺术效果 图片可以处理为艺术效果，让原本普通的图片变得有艺术感，比如处理成油画、手绘、拼图等效果。 操作：选中图片—图片工具—艺术效果—选择喜欢的效果   2.极坐标效果 想让图片有未来科技感？没问题，用插件OneKey，一键实现科技感。 操作：选中图片—一键特效—图片极坐...
PPT如何另存为高清图片
热门推荐
schwein_van的博客
10-25 2万+
最近在用PPT做海报时，发现不管是jpg还是tif格式均无法将海报另存为高清图片，即使在另存时选择其他的分辨率，最终输出也是96dpi的分辨率。 于是搜索了一下，发现可以通过修改注册表解决（我的系统为Win7旗舰版64位，Office是64位2013版本）。流程如下： “win+r”打开运行，键入“regedit”打开注册表编辑器。 将注册表展开到HKEY_CURRENT_USER\Softw...
HTML5 li-canvas：一键实现单图、多图及文字绘制
li-canvas.js的核心作用是提供一个易于管理的接口，例如`new LiCanvas(canvas_id, options)`方法，允许开发者通过指定canvas元素的ID并可选地设置背景和文字样式来初始化实例。它的主要功能包括： 1. 图片绘制： -...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值