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

随机推荐

简单的bat命令去获取wsdl的源码
@echo off cd C:\Program Files\Java\jdk1..0_45\bin for /R "D:\wqcCode\company\emtproj\02 Require ...
[Effective JavaScript 笔记]第67条：绝不要同步地调用异步的回调函数
设想有downloadAsync函数的一种变种,它持有一个缓存(实现为一个Dict)来避免多次下载同一个文件.在文件已经被缓存的情况下,立即调用回调函数是最优选择. var cache=new Dic ...
161220、使用Spring AOP实现MySQL数据库读写分离案例分析
一.前言分布式环境下数据库的读写分离策略是解决数据库读写性能瓶颈的一个关键解决方案,更是最大限度了提高了应用中读取 (Read)数据的速度和并发量. 在进行数据库读写分离的时候,我们首先要进行数据库 ...
eclipse快捷方式
虽说右键可以直接发送快捷方式到桌面,但是点击桌面图标确提示错误,偶然发现右键选个什么,配置下启动文件就ok了(就是链接到安装目录里面那个可以启动的exe),后来怎么复现不了,伤感了,不过是可以用了,还 ...
wifi 驱动移植范例
.改Makefile: 里面没有dm6441平台的,我看到有dm6446的,所以就在这里改了 ifeq ($(PLATFORM),DM6446) LINUX_SRC = /root/work/lin ...
Ajax实现原理详解
Ajax:Asynchronous javascript and xml,实现了客户端与服务器进行数据交流过程.使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作. 这就是异 ...
OWASP top10
PhishTank 是互联网上免费提供恶意网址黑名单的组织之一,它的黑名单由世界各地的志愿者提供,且更新频繁. 1.XSS 1.1. XSS简介跨站脚本攻击,英文全称是Cross Site Scri ...
开发板A/D转换原理
A/D转换器(Analog-to-Digital Converter)又叫模/数转换器,即使将模拟信(电压或是电流的形式)转换成数字信号.这种数字信号可让仪表,计算机外设接口或是微处理机来加以操作或是 ...
19.fastDFS集群理解+搭建笔记
软件架构理解 1FastDFS介绍 1.1什么是FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并 ...
Hosts文件的使用
hosts文件是什么?在哪里?hosts文件:系统文件,可以记事本打开并编辑.一般用于域名到ip地址的解析.当用户在浏览器中输入网络的域名时,系统首先会自动从hosts文件中找到对应的ip地址,一旦找 ...

canvas 绘制 矩形 圆形