canvas - 基础知识 - 绘制剪纸图形

html代码：

<!DOCTYPE html>
<html><head><title>Sprite sheet</title><style>body {background: #ddd;}#canvas {position: absolute;left: 0;top: 20px;margin: 20px;background: #fff;border: thin inset rgba(100, 150, 230, 0.5);cursor: pointer;}</style></head><body><canvas id="canvas" width="500" height="500">canvas not supported </canvas><script src="cutpaper.js"></script></body>
</html>

js逻辑代码：

var context = document.getElementById('canvas').getContext('2d');// functionsfunction drawGrid(color, stepx, stepy) {context.strokeStyle = color;context.lineWidth = 0.5;for(var i = stepx + 0.5; i< context.canvas.width; i+= stepx) {context.beginPath();context.moveTo(i , 0);context.lineTo(i, context.canvas.height);context.stroke();}for(var i= stepy + 0.5; i<context.canvas.height; i += stepy) {context.beginPath();context.moveTo(0, i);context.lineTo(context.canvas.width, i);context.stroke();}
}function draw() {context.clearRect(0, 0, context.canvas.width, context.canvas.height);drawGrid('lightgray', 10, 10);context.save();context.shadowColor  = 'rgba(200, 200, 0, 0.5)';context.shadowOffsetX = 12;context.shadowOffsetY = 12;context.shadowBlur = 15;drawCutouts();strokeCutoudShapes();context.restore();
}function drawCutouts() {context.beginPath();addCirclePath(); // CWaddOuterRectanglePath();addTrianglePath();context.fill();
}function strokeCutoudShapes() {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 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();}}function addOuterRectanglePath() {context.rect(110, 25, 370, 335);
}function addCirclePath() {context.arc(300, 300, 40, 0, Math.PI*2, 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();
}// Initialization.....................context.fillStyle = 'goldenrod'
draw();

效果图：

canvas - 基础知识 - 绘制剪纸图形相关推荐

好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
好程序员分享24个canvas基础知识小结 1
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
H5：画布Canvas基础知识讲解（三）之文字、阴影、颜色渐变
上一节介绍了H5:画布Canvas基础知识讲解(二)之插入图像.像素级操作,接下来继续讲解H5:画布Canvas基础. 文字虽然最近的WebKit版本和Firefox 3.1 nightly bui ...
Canvas基础知识1
基础内容 <canvas> 标签只有两个属性-- width和height(可选),默认值(width:300px,height:150px); 它们表示画布的实际宽度和高度,绘制的图形都 ...
Canvas基础知识
Canvas 创建canvas <canvas id="canvas"></canvas> 一般都要存在ID width和height建议直接在<ca ...
用python基础知识绘制任意格数的棋盘进行五子棋游戏
绘制任意格数的棋盘进行五子棋游戏代码显示: # 本程序是为了实现一个任意大小的棋盘def draw_board(t, array):# 绘制出第一行数字for i in range(t):print ...
canvas基础-绘制矩形（1）
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的& ...
Fabricjs在Canvas上使用路径Path绘制不规则图形
场景 Fabricjs在Canvas上插入照片并设置缩小和翻转属性: Fabricjs在Canvas上插入照片并设置缩小和翻转属性_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的 ...
《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

canvas - 基础知识 - 绘制剪纸图形

canvas - 基础知识 - 绘制剪纸图形相关推荐

最新文章

热门文章