html5绘制警告牌,2.10 创建自定义图形:绘制扑克牌花色 - HTML5 Canvas 实战
如果皇家同花顺会让你兴奋不已,本节就是为你而写。本节,我们将创建一个组函数,用来绘制一套扑克牌中的黑桃、红桃、梅花、方块。
图2-11 绘制扑克牌花色
绘制步骤
按照以下步骤,绘制一套扑克牌中的黑桃、红桃、梅花、方块:
1. 定义drawSpade()函数,该函数通过绘制四条贝塞尔曲线、两条二次曲线、一条直线,来绘制黑桃:
function drawSpade(context, x, y, width, height){
context.save();
var bottomWidth = width * 0.7;
var topHeight = height * 0.7;
var bottomHeight = height * 0.3;
context.beginPath();
context.moveTo(x, y);
//黑桃的左上部分
context.bezierCurveTo(
x, y + topHeight / 2, // control point 1
x - width / 2, y + topHeight / 2, // control point 2
x - width / 2, y + topHeight // end point
);
//黑桃的左下部分
context.bezierCurveTo(
x - width / 2, y + topHeight * 1.3, // control point 1
x, y + topHeight * 1.3, // control point 2
x, y + topHeight // end point
);
//黑桃的右下部分
context.bezierCurveTo(
x, y + topHeight * 1.3, // control point 1
x + width / 2, y + topHeight * 1.3, // control point 2
x + width / 2, y + topHeight // end point
);
//黑桃的右上部分
context.bezierCurveTo(
x + width / 2, y + topHeight / 2, // control point 1
x, y + topHeight / 2, // control point 2
x, y // end point
);
context.closePath();
context.fill();
//黑桃的底部
context.beginPath();
context.moveTo(x, y + topHeight);
context.quadraticCurveTo(
x, y + topHeight + bottomHeight, // control point
x - bottomWidth / 2, y + topHeight + bottomHeight // end point
);
context.lineTo(x + bottomWidth / 2, y + topHeight + bottomHeight);
context.quadraticCurveTo(
x, y + topHeight + bottomHeight, // control point
x, y + topHeight // end point
);
context.closePath();
context.fillStyle = "black";
context.fill();
context.restore();
}
2. 定义drawHeart ()函数,该函数通过绘制四条贝塞尔曲线,来绘制红桃:
function drawHeart(context, x, y, width, height){
context.save();
context.beginPath();
var topCurveHeight = height * 0.3;
context.moveTo(x, y + topCurveHeight);
//左上侧的曲线
context.bezierCurveTo(
x, y,
x - width / 2, y,
x - width / 2, y + topCurveHeight
);
//左下侧的曲线
context.bezierCurveTo(
x - width / 2, y + (height + topCurveHeight) / 2, x, y + (height + topCurveHeight) / 2,
x, y + height
);
//右下侧的曲线
context.bezierCurveTo(
x, y + (height + topCurveHeight) / 2,
x + width / 2, y + (height + topCurveHeight) / 2, x + width / 2, y + topCurveHeight
);
//右上侧的曲线
context.bezierCurveTo(
x + width / 2, y,
x, y,
x, y + topCurveHeight
);
context.closePath();
context.fillStyle = "red";
context.fill();
context.restore();
}
3. 定义drawClub ()函数,该函数通过绘制四个圆、两条二次曲线、一条直线,来绘制梅花:
function drawClub(context, x, y, width, height){
context.save();
var circleRadius = width * 0.3;
var bottomWidth = width * 0.5;
var bottomHeight = height * 0.35;
context.fillStyle = "black";
// 顶部的圆
context.beginPath();
context.arc(
x, y + circleRadius + (height * 0.05),
circleRadius, 0, 2 * Math.PI, false
);
context.fill();
//右下侧的圆
context.beginPath();
context.arc(
x + circleRadius, y + (height * 0.6),
circleRadius, 0, 2 * Math.PI, false
);
context.fill();
//左下侧的圆
context.beginPath();
context.arc(
x - circleRadius, y + (height * 0.6),
circleRadius, 0, 2 * Math.PI, false
);
context.fill();
//中央的填充圆
context.beginPath();
context.arc(
x, y + (height * 0.5),
circleRadius / 2, 0, 2 * Math.PI, false
);
context.fill();
//梅花的底部
context.moveTo(x, y + (height * 0.6));
context.quadraticCurveTo(
x, y + height,
x - bottomWidth / 2, y + height
);
context.lineTo(x + bottomWidth / 2, y + height);
context.quadraticCurveTo(
x, y + height,
x, y + (height * 0.6)
);
context.closePath();
context.fill();
context.restore();
}
4. 定义drawDiamond ()函数,该函数通过绘制四条直线,来绘制方块:
function drawDiamond(context, x, y, width, height){
context.save();
context.beginPath();
context.moveTo(x, y);
//左上侧的边
context.lineTo(x - width / 2, y + height / 2);
//左下侧的边
context.lineTo(x, y + height);
//右下侧的边
context.lineTo(x + width / 2, y + height / 2);
//闭合路径,自动创建右上侧的边
context.closePath();
context.fillStyle = "red"; context.fill();
context.restore();
}
5. 页面加载完成后,定义画布上下文,再调用四个绘制函数来渲染一个黑桃、一个红桃、一个梅花、一个方块:
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
drawSpade(context, canvas.width * 0.2, 70, 75, 100);
drawHeart(context, canvas.width * 0.4, 70, 75, 100);
drawClub(context, canvas.width * 0.6, 70, 75, 100);
drawDiamond(context, canvas.width * 0.8, 70, 75, 100);
};
6. 在HTML文档的body部分嵌入canvas标签:
工作原理
本节演示如何通过组合HTML5画布提供的四类子路径(直线、圆弧、二次曲线、贝塞尔曲线),来绘制任意图形。
绘制黑桃,我们可以连接四条贝塞尔曲线形式其顶部,使用两条二次曲线和一条直线形成其底部。绘制红桃,跟绘制黑桃时几乎相同的方法连接四条贝塞尔曲线,不同点在底部而不是顶部。绘制梅花,可以通过三个圆来绘制顶部,跟黑桃相似,使用两条二次曲线和一条直线形成底部。最后,绘制方块,只需简单的连接四条直线即可。
html5绘制警告牌,2.10 创建自定义图形:绘制扑克牌花色 - HTML5 Canvas 实战相关推荐
- python基本图形绘制_【Python】Python基本图形绘制-Go语言中文社区
1.Python蟒蛇图形绘制: 代码: #PythonDraw.py import turtle turtle.setup(650, 350, 200, 200) turtle.penup() tur ...
- matlab的图形绘制实验,(完整版)Matlab实验7图形绘制
实验7:图形绘制.实验目的 1.掌握绘制二维图形的常用函数. 2.掌握绘制三维图形的常用函数. 3.掌握绘制图形的辅助操作..实验内容 2 1.已知y1 x , y2 cos(2x), y3 y1 * ...
- JAVA---AWT 图形绘制
转自:http://blog.sina.com.cn/s/blog_4c7656e6010007tn.html 无色天空 1.Awt简介 1)图形用户界面(GUI)可以通过键盘或鼠标来响应用户的操作. ...
- c++之openGL在VS中的配置及简单图形绘制
VS中openGL的配置 相关资源下载: 链接:https://pan.baidu.com/s/1hRlxbckgLsNiS87k5CPvLg 提取码:tz87 以vs2010为例: 将下载的压缩包解 ...
- Matlab二维图形绘制与图形处理
Matlab二维图形绘制与图形处理 一.二维图形绘制 1.极坐标图 2.散点图 3. 平面等值线图 二.图形处理 1.添加格栅,图例 和标注 2.定制坐标 3.在之前基础上继续作图 4.新建图形置于当 ...
- 【MATLAB】三维图形绘制 ( 绘制网格 + 等高线 | meshc 函数 | 绘制平面 + 等高线 | surfc 函数 )
文章目录 一.绘制网格 + 等高线 1.meshc 函数 2.代码示例 二.绘制平面 + 等高线 1.surfc 函数 2.代码示例 一.绘制网格 + 等高线 1.meshc 函数 meshc 函数参 ...
- 计算机图形学绘制图形的过程,计算机图形学13_图形绘制流水线的实现.pdf
您所在位置:网站首页 > 海量文档  > 计算机 > 图形图像 计算机图形学13_图形绘制流水线的实现.pdf6页 本 ...
- 神经网络基础知识、常用激活函数及其Python图形绘制
在人工智能与机器学习研究与应用领域,神经网络占有重要地位.神经网络(Neural Networks, NNs),又称人工神经网络(Artificial Neural Networks, ANNs),是 ...
- Android官方开发文档Training系列课程中文版:创建自定义View之View的绘制
原文地址:http://android.xsoftlab.net/training/custom-views/custom-drawing.html#draw 自定义View最重要的部分就是它的样子了 ...
- 使用RAD Studio 10 Seattle创建自定义按钮样式
在RAD Studio 10 Seattle中,我们对IDE中的集成样式设计器进行了许多增强.在今天的帖子中,我想我将介绍使用RAD Studio 10 Seattle创建自己的自定义按钮样式的步骤. ...
最新文章
- ET001 不可不掌握的 Logstash 使用技巧
- JVM参数设置、分析
- 解决IE8下body{ overflow:hidden;}无效的解决办法
- 【转载】cuda编程入门
- Java 虚拟机 最易理解的 全面解析
- 滴滴试行“选择路线”功能 乘客可自主选择行驶路线
- 笔记1:使用奇数卷积核的原因
- java 原型模式_原型模式
- 计算机如何共享桌面,怎么将自己的台式电脑屏幕与多人共享
- GoodERP交付手册:CRM模块交付
- CJ88项目或WBS结算报错:消息号 KD506 “为接收者类型 FXA 定义一个成本要素“
- edge浏览器设置启动时默认打开新标签页
- Linux系统管理、系统安全命令概述
- 北风网盘点2016年中国程序员薪酬状况
- 传奇GOM引擎——添加NPC
- CSU1041——单词统计
- 在java中怎样做当鼠标选中文字单击鼠标右键出现菜单,定制鼠标右键“新建”菜单选项...
- Synaptic Systems NeuN抗体的应用和参考文献
- office提示“office未获得合适的许可,你可能是盗版软件的受害者。”解决方法
- 动态修改logback日志级别