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

随机推荐

Eclipse中为自己写完的函数添加注释（快捷键ALT+SHIFT+J）
函数名上右键:Source--->Generate Element Comment
Eclipse设置代码模版
设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元 ...
js onmouseleave
onmouseleave no propagation onmouseout will propagation
Maps for Developers
苹果官方文档: Give your apps a sense of place with maps and location information. Present maps with custom ...
asp.net 捕获throw
<script type="text/javascript"> function pageLoad() { Sys.WebForms.PageRequestManage ...
R开发环境（Eclipse+StatET）
引用:http://cos.name/2008/12/eclipse-statet-for-r-editor/ StatET(www.walware.de/goto/statet) 1. 安装软件 s ...
mysql5.6中 order by 多个字段排序问题
今天用order by排序后面跟了多个字段,如sql语句: SELECT a.id,a.loginname,a.address,u.id,u.`name`,u.address FROM admin_ ...
Python3基础把一个列表中内容给另外一个列表，形成两个独立的列表
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
caller和callee属性
ECMAScript5规范了函数对象的属性:caller.除了Opera的早期版本不支持,其他浏览器都支持这个ECMAScript3并没有定义的属性. [IE,Firefox,Chrome,Safar ...
python ConfigParser配置读写
一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号"[ ]"内包含的为section.section 下面为类似于key ...

canvas 绘制 矩形 圆形