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 ...
随机推荐
- inux命令英文缩写的含义（方便记忆） 2
linux常用命令的英文单词缩写 命令缩写: ls:list(列出目录内容) cd:Change Directory(改变目录) su:switch user 切换用户rpm:redhat packa ...
- hdu 1597(矩阵快速幂)
1597: 薛XX后代的IQ Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 228 Solved: 55[Submit][Status][Web Bo ...
- MINIBASE源代码阅读笔记之HFPage
HFPage heap file的page的类 成员 slot_t:用来表示页里的slot,包括offset和length slot[]:倒着生长的slot array slotCnt:有多少已用sl ...
- (16) go 面向对象
一.封装 二.继承 1. 2. 3. 4. 5 6. 7.多重继承 三.接口
- 长沙理工大学第十二届ACM大赛-重现赛 L - 选择困难症
题目描述 小L有严重的选择困难症. 早上起床后,需要花很长时间决定今天穿什么出门. 假设一共有k类物品需要搭配选择,每类物品的个数为Ai,每个物品有一个喜欢值Vj,代表小L对这件物品的喜欢程度. 小L ...
- 2017 计蒜之道 初赛 第五场 A. UCloud 机房的网络搭建
贪心. 从大到小排序之后进行模拟,注意$n=1$和$n=0$的情况. #include <iostream> #include <cstdio> #include <cs ...
- 图像 & 视频
Python图像处理库:Pillow 初级教程 用Python做图像处理 python 视频处理,提取视频相关帧,读取Excel
- oracle charset
select userenv('language') from dual; USERENV('LANGUAGE') ------------------------------------------ ...
- Python Socket多线程并发
1.SocketServer模块编写的TCP服务器端代码 Socketserver原理图 服务端: import SocketServer #导入SocketServer,多线程并发由此类实现 cla ...
- 【8.23校内测试】【贪心】【线段树优化DP】
$m$的数据范围看起来非常有问题??仔细多列几个例子可以发现,在$m<=5$的时候,只要找到有两行状态按位$&$起来等于$0$,就是可行方案,如果没有就不行. #include<i ...