<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<!-- canvas的width/height默认都是300 -->
<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 绘制 矩形 圆形的更多相关文章

  1. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. canvas绘制矩形

    canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...

  3. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  4. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  5. html5 canvas绘制矩形和圆形

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. canvas 绘制矩形

    XXX(x,y,width,height)   x矩形左上角x坐标                                   y矩形左上角y坐标                       ...

  7. vue下canvas绘制矩形

    起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件moused ...

  8. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  9. canvas绘制线和矩形

    ###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...

随机推荐

  1. java 静态函数锁对象说明

    在内存加载.class文件后,会自动创建一个对象,用于保存class的信息,与我们程序员手工创建的对象不一样.

  2. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数011,ocr，字符识别

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数011,ocr,字符识别 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“p ...

  3. 常见Oracle HINT的用法

    1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量,使资源消耗最小化. 例如: SELECT /*+ALL+_ROWS*/ EMP_NO,EMP_NAM,DAT_I ...

  4. ipcs命令

    unix/linux下的共享内存.信号量.队列信息管理 在unix/linux下,经常有因为共享内存.信号量,队列等共享信息没有干净地清楚而引起一些问题. 查看共享信息的内存的命令是ipcs [-m| ...

  5. [课程设计]Scrum 2.4 多鱼点餐系统开发进度(下单一览页面修复)

    Scrum 2.4 多鱼点餐系统开发进度  (下单一览页面修复) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐 ...

  6. AOJ 0121: Seven Puzzle （BFS DP STL 逆向推理）(转载）

    转载自:  http://m.blog.csdn.net/blog/Enjoying_Science/42008801 题目链接:http://acm.hust.edu.cn/vjudge/probl ...

  7. [问题2014S08] 复旦高等代数II（13级）每周一题（第八教学周）

    [问题2014S08]  设分块上三角阵 \[A=\begin{bmatrix} A_1 & B \\ 0 & A_2 \end{bmatrix},\] 其中 \(m\) 阶方阵 \( ...

  8. 19.fastDFS集群理解+搭建笔记

    软件架构理解 1FastDFS介绍 1.1什么是FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并 ...

  9. SQL Server 查询表的记录数(3种方法，推荐第一种)

    http://blog.csdn.net/smahorse/article/details/8156483 --SQL Server 查询表的记录数 --one: 使用系统表. SELECT obje ...

  10. eclipse + maven 搭建springMVC+Spring+mybatis 系统

    首先需要下载maven 安装maven插件.自行百度. 1: 创建maven系统 http://huxiaoheihei.iteye.com/blog/1766986 2:添加pom依赖: pom.x ...