HTML5画：线、圆、矩形、渐变
示例一：矩形
<!DOCTYPE html><head>
<meta charset=utf-8>
<title>HTML5画线、圆、矩形</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d"); //获取2d内容的引用，调用绘图API
draw.fillStyle="#ff0000"; //方式一指定填充颜色
draw.fillRect(0,0,300,100); //坐标和长宽
draw.fillStyle="rgba(0,0,255,0.5)"; //方式二rgb+透明度
draw.fillRect(400,0,100,100); //坐标和长宽
})
</script>
</body>
<canvas id="drawbox" width="500" height="500"></canvas>
</body>
</html>
示例二：线
<!DOCTYPE html><head>
<meta charset=utf-8>
<title>HTML5画线、圆、矩形</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d"); //获取2d内容的引用，调用绘图API
draw.strokeStyle="#000000"; //指定绘图线颜色
draw.moveTo(10,10); //起始位置
draw.lineTo(150,10); //终止位置
draw.lineTo(10,50); //结束前继续之前的结束点连接
draw.lineTo(10,50);
draw.lineTo(10,10);
draw.stroke(); //结束
})
</script>
</body>
<canvas id="drawbox" width="500" height="500"></canvas>
</body>
</html>
示例三：圆
<!DOCTYPE html><head>
<meta charset=utf-8>
<title>HTML5画线、圆、矩形</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d"); //获取2d内容的引用，调用绘图API draw.fillStyle="red"; //颜色
draw.beginPath(); //从新画
draw.arc(50,50,50,0,Math.PI*2,true); //圆心x坐标|圆心y坐标|直径|始|PI为圆周率，Math.PI*2为画圆|true为时针方向：逆时针，0为顺时针，
draw.closePath(); //结束
draw.fill();
})
</script>
</body>
<canvas id="drawbox" width="500" height="500"></canvas>
</body>
</html>
示例四：渐变
<!DOCTYPE html><head>
<meta charset=utf-8>
<title>HTML5画线、圆、矩形</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d"); //获取2d内容的引用，调用绘图API //指定渐变区块
var grd=draw.createLinearGradient(50,50,200,50); //坐标，长宽
grd.addColorStop(0,"black"); //起点颜色
grd.addColorStop(1,"green"); //终点颜色 draw.fillStyle=grd; //设为填充样式
draw.fillRect(50,50,200,50); //填充进矩形内
})
</script>
</body>
<canvas id="drawbox" width="500" height="500"></canvas>
</body>
</html>
同理所得~~自己尝试下吧
HTML5画：线、圆、矩形、渐变的更多相关文章
- 使用gimp画线、矩形、圆等
使用gimp画线.矩形.圆等 https://blog.csdn.net/tody_guo/article/details/7628508 2012年06月03日 19:08:47 Tody Guo ...
- CoreGraphics--画线/圆/矩形
- (void)drawRect:(CGRect)rect { // Drawing code NSLog(@"drawRect自动调用"); //画图步骤 //获取上下文(/画笔 ...
- PHP合成图片、生成文字、居中对齐、画线、矩形、三角形、多边形、图片抗锯齿、不失真 高性能源码示例
function generateImg($source, $text1, $text2, $text3, $font = './msyhbd.ttf') { $date = '' . date ( ...
- H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入
一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...
- IOS Quartz 各种绘制图形用法---实现画图片、写文字、画线、椭圆、矩形、棱形等
// Only override drawRect: if you perform custom drawing. // An empty implementation adversely affec ...
- 纯JS画点、画线、画圆的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- OpenCV各种绘制调用：线，矩形，圆，椭圆，文字
OpenCV提供了各种绘制接口,可以往图片里画各种东西,这种功能可以为以后在图像上标记一些信息方便调试 // drawcall.cpp: 定义控制台应用程序的入口点. // #include &quo ...
- 【液晶模块系列基础视频】4.1.X-GUI图形界面库-画线画圆等函数简介
[液晶模块系列基础视频]4.1.X-GUI图形界面库-画线画圆等函数简介 ============================== 技术论坛:http://www.eeschool.org 博客地 ...
- IOS 绘制基本图形（ 画圆、画线、画圆弧、绘制三角形、绘制四边形）
// 当自定义view第一次显示出来的时候就会调用drawRect方法- (void)drawRect:(CGRect)rect { // 1.获取上下文 CGContextRef ctx = UIG ...
随机推荐
- c++ 容器学习 理论
[转载]http://blog.csdn.net/acosoft/article/details/4395468 在面向对象的语言中,大多引入了容器的概念.那么 什么 是 容器?实质上就是一组相同类型 ...
- win10家庭版和专业版远程桌面出现身份验证错误， 要求的函数不受支持。解决办法【亲测有效】
1.解决 win10家庭中文版 远程连接:出现身份验证错误 要求的函数不受支持 Windows 5.10日更新后,远程连接出现失败. 提示: 出现身份验证错误.要求的函数不受支持 这可能是由于 Cre ...
- EOJ 3260 袋鼠妈妈找孩子
暴力搜索. 主要目的就是找到任意一条路径,使得路径长度大于等于$k+1$,写个爆搜发现很快能出解.判断某点是否可走,需要看四周有没有已经走过的点的$dis$比这个点的$dis$小$2$或者$2$以上. ...
- Python之路【第一篇】：介绍、基本语法、流程控制
一.python 简介 python 特点 Python是一种计算机程序设计语言.你可能已经听说过很多种流行的编程语言,比如非常难学的C语言,非常流行的Java语言,适合初学者的Basic语言,适合网 ...
- UVA11019 Martix Matcher --- AC自动机
UVA11019 Martix Matcher 题目描述: 给定一个\(n*m\)的文本串 问一个\(x*y\)的模式串出现的次数 AC自动机的奇妙使用 将\(x*y\)的模式串拆分成x个串,当x个串 ...
- 【四边形不等式】HDU3506-Monkey Party
[题目大意] 香蕉森林里一群猴子(n<=1000)围成一圈开会,会长给他们互相介绍,每个猴子需要时间a[i].每次只能介绍相邻的两只猴子x和y认识,同时x所有认识的猴子和y所有认识的猴子也就相互 ...
- bzoj 3573: [Hnoi2014]米特运输
3573: [Hnoi2014]米特运输 Description 米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储存一直是一个大问题. D星 ...
- Android:Date、String、Long三种日期类型之间的相互转换
源地址:http://blog.csdn.net/wangyanguiyiyang date类型转换为String类型: // formatType格式为yyyy-MM-dd HH:mm:ss//yy ...
- centos 7 源码包安装、卸载nginx
1.源码包安装之前,首页安装依赖包 yum -y install gcc gcc-c++ make libtool zlib zlib-devel openssl openssl-devel pcre ...
- HDU 5650 so easy 数学
so easy 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5650 Description Given an array with n integ ...