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提供了三种方法绘制矩形: ----> ...

随机推荐

windows系统调用临界区机制
#include "iostream" #include "windows.h" #include "cstring" using name ...
JS 删除字符串最后一个字符的几种方法
字符串:string s = "1,2,3,4,5," 目标:删除最后一个 "," 方法:1.用的最多的是Substring,这个也是我一直用的 s=s.Sub ...
最长公共上升子序列(LCIS)
最长公共上升子序列慕名而知是两个字符串a,b的最长公共递增序列,不一定非得是连续的.刚开始看到的时候想的是先用求最长公共子序列,然后再从其中找到最长递增子序列,可是仔细想一想觉得这样有点不妥,然后从网 ...
servlet定义
. 运行在服务器上的java类
MAC: Homebrew(代替yum）安装
安装 ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)" 最新方式请 ...
Tomcat配置文件之servlet.xml中选项介绍
Servlet.xml 分为以下元素: server, service, Connector ( 表示客户端和service之间的连接), Engine ( 表示指定service 中的请求处理机,接 ...
mybatis代码生成（generator工具生成代码）
generator工具生成代码下载地址 http://pan.baidu.com/s/1bY8C0I
jenkins插件开发-此路是我开
一:前置环境 1. JDK1.6+ 2. maven已安装 3. jenkins已搭建 4. eclipse已安装(并安装了maven插件) 以上环境可以百度搜索并安装我的环境是WIN7 64位系统 ...
Flowplayer-Skin
SOURCE URL: https://flowplayer.org/docs/skinning.html Skinning with CSS3 Flowplayer skin design is C ...
无法嵌入互操作类型“ESRI.ArcGIS.Carto.RectangleElementClass”。请改用适用的接口。
右键点击应用的程序集 ESRI.ArcGIS.Controls,修改"嵌入互操作类型"的值即可

canvas 绘制 矩形 圆形