2.7.2_剪纸图形

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>路径描边与填充</title><style>body{background: #000000;}#canvas{background: #fff;}</style></head><body><canvas id="canvas" width="1100" height="650"></canvas></body><script>var canvas = document.getElementById('canvas'),context = canvas.getContext('2d');//初始化context.fillStyle = 'goldenrod';draw();function draw(){context.clearRect(0,0,context.canvas.width,context.canvas.height);context.save();context.shadowColor = 'rgba(200,200,0,0.5)';context.shadowOffsetX = 12;context.shadowOffsetY = 12;context.shadowBlur = 15;drawCutouts();strokeCutoutShapes();  //给外轮廓描边context.restore();}function drawCutouts(){ //绘制外框context.beginPath();addOuterRectanglePath();addCirclePath();addRectanglePath();addTrianglePath();context.fill();}function strokeCutoutShapes(){  //描边context.save();context.strokeStyle = 'rgba(0,0,0,0.7)';context.beginPath();addOuterRectanglePath();context.stroke();context.beginPath();addCirclePath();addRectanglePath();addTrianglePath();context.stroke();context.restore();}function addOuterRectanglePath(){context.rect(110,25,370,335);  //正常是按照顺时针方向绘制的}function addCirclePath(){context.arc(300,300,30,0,Math.PI*2,true); //true为逆时针方向中绘制}function addRectanglePath(){rect(310,55,70,35,true);    //逆时针四边形}function addTrianglePath(){     //逆时针三角形context.moveTo(400,200);context.lineTo(250,115);context.lineTo(200,200);context.closePath();}function rect(x,y,w,h,direction){  //自定义绘制四边形if(direction){              //逆时针context.moveTo(x,y);context.lineTo(x,y+h);context.lineTo(x+w,y+h);context.lineTo(x+w,y);context.closePath();}else{                      //顺时针context.moveTo(x,y);context.lineTo(x+w,y);context.lineTo(x+w,y+h);context.lineTo(x,y+h);context.closePath();}}</script>
</html>

2.7.2_剪纸图形相关推荐

canvas - 基础知识 - 绘制剪纸图形
html代码: <!DOCTYPE html> <html><head><title>Sprite sheet</title><sty ...
离谱的 CSS！从表盘刻度到剪纸艺术
某日,群里有这样一个问题,如何实现这样的表盘刻度: 这其实是个挺有意思的问题,方法也有很多. 单标签,使用 conic-gradient 实现表盘刻度最简单便捷的方式,就是利用角向渐变的方式 con ...
【绘制】HTML5 Canvas 剪纸效果（镂空效果）
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
《HTML5 Canvas核心技术图形、动画与游戏开发》读书笔记
<HTML5 Canvas核心技术图形.动画与游戏开发> 读书笔记文章目录 <HTML5 Canvas核心技术图形.动画与游戏开发> 读书笔记第1章基础知识第2章 ...
6.2_[Java 数组]-利用二重循环打印各种图形
################################################## 目录玩坏二重循环一句话概括二重循环打印一个矩形打印正直角三角形左下角顶点打印倒直角三角形 ...
2020-2021学年——图像图形编程实践实验2_图像的基本运算
图像的基本运算实验目的 1．了解图像的算术运算在数字图像处理中的初步应用; 2．体会图像算术运算处理的过程和处理前后图像的变化. 实验设备 PC机.matlab2018b 实验原理图像的代数运 ...
国潮国粹剪纸风京剧人物PSD素材，让东方韵味更浓
"脸谱"是指中国传统戏剧里男演员脸部的彩色化妆.这种脸部化妆主要用于净(花脸)和丑(小丑).它在形式.色彩和类型上有一定的格式.内行的观众从脸谱上就可以分辨出这个角色是英雄还是坏人 ...
精美剪纸风三维感海报合集分享，这样的质感你喜欢吗？
一幅优秀的海报,往往对图形.文字.色彩等设计元素的运用要求非常高,在提升视觉表现力的同时还需要具备独特的艺术魅力. 以图形为主体的海报在近年来呈现大放异彩的趋势,各种时下流行元素被运用到其中,能够迅 ...
平面设计师必备，剪纸风格素材
其特点主要表现在空间观念的二维性.刀味纸感.线条与装饰.写意与寓意等许多方面.剪纸的画面线条力求单纯.朴实,并能有机地连结在一起:画面丰满均匀,有的还讲究对称,所表现的形象既有艺术夸张.变形,富于图案 ...

2.7.2_剪纸图形

2.7.2_剪纸图形

2.7.2_剪纸图形相关推荐

最新文章

热门文章