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

随机推荐

全网扫描扫描10000端口后的优化脚本&域名列表指定端口的批量测试
方法一: #coding=utf-8 import urllib2 import threading from time import ctime,sleep print "Start-Ti ...
微软 .net 你更新这么快IDE vs2015 、语法糖 6.0、framework、‘吹得这么牛，然并用
好久没写吐槽文章了,因为无尽的加班,也因为工作的变迁,又因为最近看了微软又尼玛发布什么什么,好受不了. 今年大专毕业第八个年头了,人也到了30,真是光阴荏苒啊.最近这一两年发生了很多事,让我自己倍受打 ...
-XX:-PrintClassHistogram 按下Ctrl+Break后，打印类的信息
-XX:+PrintClassHistogram –按下Ctrl+Break后,打印类的信息: num #instances #bytes class name ------ ...
php学习01
MySQL中select * for update锁表的问题
MySQL中select * for update锁表的问题由于InnoDB预设是Row-Level Lock,所以只有「明确」的指定主键,MySQL才会执行Row lock (只锁住被选取的资料例 ...
常用HTML正则表达式
1.只能输入数字和英文的: <input onkeyup="value=value.replace(/[\W]/g,'') " > 2.只能输入数字的: <inp ...
仿souhu页面设计
仿搜狐页面设计 Html页面设计代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
【iOS】我的Objective-C学习笔记
1.代码中增加标记 #pragma mark - #pragma mark 2.点语法 Person *p = [Person new]; // 点语法的本质还是方法调用 p.age = 10; // ...
简单SSM配置详解
SSM:spring+springMVC+Mybatis 学习网友的http://www.cnblogs.com/invban/p/5133257.html,并对其进行了详细的解说. 源码下载:htt ...
aws在线技术峰会笔记-游戏解决方案
选项1:可以将aws的SDK嵌入到APP中. 选项2:Mobile Hub自动生成代码. 选项3:开源免费的游戏引擎.可视化脚本编程,实现客户端的逻辑代码. 用户管理 Cognito Identity ...

canvas 绘制 矩形 圆形