HTML5画：线、圆、矩形、渐变

时间：2023-02-26 14:47:23

示例一：矩形

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>

示例二：线

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.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>

示例三：圆

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="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>

示例四：渐变

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

//指定渐变区块

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画：线、圆、矩形、渐变

实例：制作简单面板

HTML5画：线、圆、矩形、渐变的更多相关文章

  1. 使用gimp画线、矩形、圆等

    使用gimp画线.矩形.圆等 https://blog.csdn.net/tody_guo/article/details/7628508 2012年06月03日 19:08:47 Tody Guo  ...

  2. CoreGraphics--画线&sol;圆&sol;矩形

    - (void)drawRect:(CGRect)rect { // Drawing code NSLog(@"drawRect自动调用"); //画图步骤 //获取上下文(/画笔 ...

  3. PHP合成图片、生成文字、居中对齐、画线、矩形、三角形、多边形、图片抗锯齿、不失真 高性能源码示例

    function generateImg($source, $text1, $text2, $text3, $font = './msyhbd.ttf') { $date = '' . date ( ...

  4. H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入

    一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示&lt ...

  5. IOS Quartz 各种绘制图形用法---实现画图片、写文字、画线、椭圆、矩形、棱形等

    // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affec ...

  6. 纯JS画点、画线、画圆的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. OpenCV各种绘制调用：线，矩形，圆，椭圆，文字

    OpenCV提供了各种绘制接口,可以往图片里画各种东西,这种功能可以为以后在图像上标记一些信息方便调试 // drawcall.cpp: 定义控制台应用程序的入口点. // #include &quo ...

  8. 【液晶模块系列基础视频】4&period;1&period;X-GUI图形界面库-画线画圆等函数简介

    [液晶模块系列基础视频]4.1.X-GUI图形界面库-画线画圆等函数简介 ============================== 技术论坛:http://www.eeschool.org 博客地 ...

  9. IOS 绘制基本图形（ 画圆、画线、画圆弧、绘制三角形、绘制四边形）

    // 当自定义view第一次显示出来的时候就会调用drawRect方法- (void)drawRect:(CGRect)rect { // 1.获取上下文 CGContextRef ctx = UIG ...

随机推荐

  1. 一起来啃书——PHP看书

    形式所迫,不得不开展android的学习,PHP这边也开始了啃书的日子.两部500+的书,45天够不,有点忙有点忙... 早上的胃胀,简直是一记闷棍,长点儿记性吧........ 1.PHP+MYSQ ...

  2. Nginx系列1之部分模块详解

    1 内核模块: 名称: daemon 语法: daemon on |off 默认值: on 功能: 决定nginx 在前台执行还是后台守护进程执行的 ================== 名称: En ...

  3. React-Native入门指导之iOS篇

    React-Native 入门指导系列教程目录 一.准备工作 (已完成) 二.项目介绍与调试 三.CSS样式与Flex布局 四.常用UI控件的使用 五.JSX在React-Native中的应用 六.事 ...

  4. web缓存值varnish使用

    具体的介绍到官网 https://www.varnish-software.com/static/book 一.简介 Varnish is a reverse HTTP proxy, sometime ...

  5. solrj&colon;org&period;apache&period;solr&period;common&period;util&period;NamedList&period;java

    package org.apache.solr.common.util; import java.io.Serializable; import java.util.ArrayList; import ...

  6. 编程语言性能游戏排行榜，C&sol;C&plus;&plus;第一ATS第二JAVA第三

    编程语言性能游戏排行榜,C/C++第一ATS第二JAVA第三 编程语言性能游戏排行榜,C/C++第一ATS第二JAVA第三

  7. win10&plus; ubuntu12&period;04双系统安装教程与遇到的问题

    1. 准备ISO. 参考:网站http://mirrors.ustc.edu.cn/ubuntu-releases/precise/ 下载 ubuntu-12.04.5-desktop-amd64.i ...

  8. Java知多少（14）数组

    如果希望保存一组有相同类型的数据,可以使用数组. 数组的定义和内存分配 Java 中定义数组的语法有两种: type arrayName[]; type[] arrayName; type 为Java ...

  9. asdasda

    git://git.coding.net/lick468/wf.git git地址:https://git.coding.net/lick468/wf.git

  10. Mysql储存过程4&colon;mysql变量设置

    默认全局变量是两个@@开头, 可用show variables查看所有默认变量: @@user #declare定义变量只能用在储存过程中 #declare 变量名 数据类型 可选类型 declare ...

相关文章