canvas 绘制矩形圆形

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

<canvas id="fillRect" width="100" height="100"></canvas>
<canvas id="strokeRect" width="100" height="100"></canvas>
<canvas id="arc" width=" 400" height="400"></canvas>
<script type="text/javascript">
function canvasFillRect(id) {//绘制矩形实心
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "pink";
context.fillRect(0, 0, 100, 100);
}
canvasFillRect("fillRect");
function canvasStrokeRect(id) {//绘制矩形空心
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.strokeStyle = "red";
context.strokeRect(0, 0, 100, 100);
}
canvasStrokeRect("strokeRect");

function canvasArc(id) {//绘制圆心实心空心
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
//实心
context.fillStyle = "green";
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.fill();
//空心
context.beginPath();
context.arc(210, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.strokeStyle = "yellow";
context.stroke();
}
canvasArc("arc");
</script>
</body>
</html>

canvas 绘制矩形圆形的更多相关文章

h5学习-canvas绘制矩形、圆形、文字、动画
绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
canvas绘制矩形
canvas绘制矩形方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...
canvas 绘制矩形和圆形
canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...
Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果
绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...
html5 canvas绘制矩形和圆形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
canvas 绘制矩形
XXX(x,y,width,height) x矩形左上角x坐标 y矩形左上角y坐标 ...
vue下canvas绘制矩形
起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件moused ...
使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
canvas绘制线和矩形
###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...

随机推荐

struts 数据验证
1. validate()验证将对页面表单验证的内容写到validate()方法中,实现验证和业务处理内容的分离在Action中添加 validate()方法 public void vali ...
机器学习实战-边学边读python代码(4)
程序2-4 分类器针对约会网站的测试代码(4) def datingClassTest():hoRatio = 0.10 //将文件读入内存矩阵datingDataMat,datingLabels = ...
Linux 奇技淫巧
为了整理这些命令,花了我一个晚上的时间,但是不弄明白,我就是不爽啊. 1.cmatrix 命令黑客帝国,就是酷炫,先按F11全屏效果更佳安装:luffy@ubuntu:~$ sudo apt-ge ...
Prince2的七大原则（7）
[Prince2科普]Prince2的七大原则(7) 2016-12-12 光环组织级项目管理按照惯例我们先来回顾一下,PRINCE2七大原则分别是指:持续的业务验证,经验学习,角色与责任,按阶段管 ...
HDU 5688：2016"百度之星" - 资格赛 Problem D
原文链接:https://www.dreamwings.cn/hdu5688/2650.html Problem D Time Limit: 2000/1000 MS (Java/Others) ...
2015弱校联盟(1) - E. Rectangle
E. Rectangle Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java class name ...
[Machine-Learning] 机器学习中的几个度量指标
Several classiﬁcation metrics for ML/DM methods. 主要解释下机器学习(或数据挖掘)中的几个度量指标. 1. 关于 "TN/TP/FN/FP&q ...
mac攻略(三) -- apache站点配置
Mac OS X 中默认有两个目录可以直接运行你的 Web 程序, 一个是系统级的 Web 根目录:/Library/WebServer/Documents/ 此根目录我们平常使用地址http://l ...
关于SQLite作业
--查询Student表中的所有记录的Sname.Ssex和Class列.SELECT sname,ssex,class from Student --查询教师所有的单位即不重复的Depart列.SE ...
CentOS 7数据库mysql和mariadb手动安装冲突的问题解决
由于确定使用mysql,那只有卸载mariadb了. 一.首先查看当前安装的mariadb包 rpm -qa|grep mariadb 本人得到结果是:mariadb-libs-5.5.44-2.el ...

canvas 绘制 矩形 圆形