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 ...
随机推荐
- /proc文件夹介绍
Linux系统上的/proc目录是一种文件系统,即proc文件系统.与其它常见的文件系统不同的是,/proc是一种伪文件系统(也即虚拟文件系统),存储的是当前内核运行状态的一系列特殊文件,用户可以通过 ...
- Codeforces 918C The Monster（括号匹配+思维）
题目链接:http://codeforces.com/contest/918/problem/C 题目大意:给你一串字符串,其中有'('.')'.'?'三种字符'?'可以当成'('或者')'来用,问该 ...
- 找到最大或最小的N个元素---heapq模块
堆排序heapq的用法 基本用法: 复杂数据结构: # coding=utf- # example.py # Example of using heapq to find the N smallest ...
- WPF 获取计算机字体
//加载计算机上可用的字体 public void LoadFonts(object ietfLanguageTag) { try { var sysFonts = Fonts.SystemFontF ...
- 【LOJ】#2129. 「NOI2015」程序自动分析
题解 开始是想两个并查集的 和A相等,和A不相等 如果AB相等就连 A 相等,B相等 B不相等 A不相等 如果AB不相等就连 A不相等,B相等 B相等,A不相等 但是显然不对,因为和A不相等的不一定和 ...
- oracle 内连接、外连接、自然连接、交叉连接练习
oracle 内连接.外连接.自然连接.交叉连接练习 --查询员工信息 select * from emp; --查询部门信息 select * from dept; --需求:查询员工姓名.薪资和所 ...
- Cordova - 禁用整个应用页面的上下拖动效果（防止拖动出现黑边）
可在 config.xml 中进行如下设置: <preference name="WebViewBounce" value="false" /> ...
- codeforces-727A
题目连接:http://codeforces.com/contest/727/problem/A A. Transformation: from A to B time limit per test ...
- 洛谷P1099 BZOJ1999 树网的核 [搜索，树的直径]
洛谷传送门,BZOJ传送门 树网的核 Description 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T为树网(treenetwork),其中V ...
- Python函数系列-Random
import random i = int(input('输入第一个数:')) j = int(input('输入第二个数:')) l = int(input('输入需要产生的个数:')) k=0 w ...