示例一:矩形
<!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 ...
随机推荐
-
一起来啃书——PHP看书
形式所迫,不得不开展android的学习,PHP这边也开始了啃书的日子.两部500+的书,45天够不,有点忙有点忙... 早上的胃胀,简直是一记闷棍,长点儿记性吧........ 1.PHP+MYSQ ...
-
Nginx系列1之部分模块详解
1 内核模块: 名称: daemon 语法: daemon on |off 默认值: on 功能: 决定nginx 在前台执行还是后台守护进程执行的 ================== 名称: En ...
-
React-Native入门指导之iOS篇
React-Native 入门指导系列教程目录 一.准备工作 (已完成) 二.项目介绍与调试 三.CSS样式与Flex布局 四.常用UI控件的使用 五.JSX在React-Native中的应用 六.事 ...
-
web缓存值varnish使用
具体的介绍到官网 https://www.varnish-software.com/static/book 一.简介 Varnish is a reverse HTTP proxy, sometime ...
-
solrj:org.apache.solr.common.util.NamedList.java
package org.apache.solr.common.util; import java.io.Serializable; import java.util.ArrayList; import ...
-
编程语言性能游戏排行榜,C/C++第一ATS第二JAVA第三
编程语言性能游戏排行榜,C/C++第一ATS第二JAVA第三 编程语言性能游戏排行榜,C/C++第一ATS第二JAVA第三
-
win10+ ubuntu12.04双系统安装教程与遇到的问题
1. 准备ISO. 参考:网站http://mirrors.ustc.edu.cn/ubuntu-releases/precise/ 下载 ubuntu-12.04.5-desktop-amd64.i ...
-
Java知多少(14)数组
如果希望保存一组有相同类型的数据,可以使用数组. 数组的定义和内存分配 Java 中定义数组的语法有两种: type arrayName[]; type[] arrayName; type 为Java ...
-
asdasda
git://git.coding.net/lick468/wf.git git地址:https://git.coding.net/lick468/wf.git
-
Mysql储存过程4:mysql变量设置
默认全局变量是两个@@开头, 可用show variables查看所有默认变量: @@user #declare定义变量只能用在储存过程中 #declare 变量名 数据类型 可选类型 declare ...