包括线性渐变和径向渐变

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #mycanvas{

            border: 1px solid #9c9898;

            background: white;

        }

    </style>

    <script language="JavaScript">

        window.onload=function(){

            var canvas = document.getElementById("mycanvas");

            var contex = canvas.getContext("2d");

            //线性渐变

            var clg=contex.createLinearGradient(0,0,200,0);

            clg.addColorStop(0,"#ff0000");

            clg.addColorStop(0.5,"#00ff00");

            clg.addColorStop(1,"#0000ff");

            contex.fillStyle=clg;

            contex.strokeStyle=clg;

            contex.fillRect(10,10,200,200);

            //径向渐变

            var crg=contex.createRadialGradient(325,100,20,325,100,80);

            crg.addColorStop(0,"#ff0000");

            crg.addColorStop(0.75,"#00ff00");

            crg.addColorStop(1,"#0000ff");

            contex.fillStyle=crg;

            //contex.strokeStyle=crg;

            contex.fillRect(230,10,200,200);

        }

    </script>

</head>

<body>

<canvas id="mycanvas" width="800" height="800"></canvas>

</body>

</html>

填充图片，有四种填充方式

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #mycanvas{

            border: 1px solid #9c9898;

            background: blue;

        }

        button{

            height: 80px;

            width: 200px;

        }

    </style>

    <script language="JavaScript">

        function draw(type){

            var canvas = document.getElementById("mycanvas");

            var contex = canvas.getContext("2d");

            contex.clearRect(0,0,500,200);

            var img =document.getElementById("cf");

            var pat = contex.createPattern(img,type);

            contex.rect(0,0,canvas.width,canvas.height);

            contex.fillStyle=pat;

            contex.fill();

        }

    </script>

</head>

<body>

    <img src="1.png" id="cf" width="50 " height="50"><br>

    <button onclick="draw('repeat-x')" >repeat-x</button>

    <button onclick="draw('repeat-y')">repeat-y</button>

    <button onclick="draw('repea')">repeat</button>

    <button onclick="draw('no-repeat'')">no-repeat</button>

    <br>

    <canvas id="mycanvas" width="800" height="800"></canvas>

</body>

</html>

html 绘图渐变和图片填充的更多相关文章

  1. H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作

    今天的目标 3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形) 3.2:canvas绘图--渐变对象 线性渐变: linearGradient 径向渐变: var g = ctx.c ...

  2. Java设置PPT幻灯片背景——纯色、渐变、图片背景

    PPT幻灯片生成时,系统默认是无色背景填充,幻灯片设计需要手动设置背景效果,可设置颜色填充或者图片背景填充.本文将对此介绍具体实现方法. 使用工具:Free Spire.Presentation fo ...

  3. HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. UI-UIImageView的图片填充方式(contentMode)_图片作为控件背景图的拉伸方式(stretch)介绍

    常用图片填充方式 这里只介绍三个最常用的图片填充方式 UIViewContentModeScaleToFill模式会导致图片变形.例如: UIViewContentModeScaleAspectFit ...

  5. 【pyqtgraph绘图】线条，填充和颜色

    解读官方API-线条,填充和颜色 参考: http://www.pyqtgraph.org/documentation/style.html 线条,填充和颜色 Qt依靠其QColor,QPen和QBr ...

  6. CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  7. 使用Aspose.word (Java) 填充word文档数据（包含图片填充）

    Aspose填充word数据 本文介绍了如何使用aspose进行word文档的生成,并提供了工具类供参考. 有问题欢迎 call 微信:905369866,小弟尽力而为..毕竟这玩意没吃透. 目录 A ...

  8. Qt 2D绘图 渐变填充（三种渐变方式）

    在qt中提供了三种渐变方式,分别是线性渐变,圆形渐变和圆锥渐变.如果能熟练应用它们,就能设计出炫目的填充效果. 线性渐变: 1.更改函数如下: void Dialog::paintEvent(QPai ...

  9. Java基础之在窗口中绘图——渐变填充（GradientApplet 1）

    Applet程序. import javax.swing.*; import java.awt.*; import java.awt.geom.*; @SuppressWarnings("s ...

随机推荐

  1. java web dao 层和dao 实现层有什么好处

    接口是为了屏蔽不同数据库的JDBC实现差异而出现的. 以常见的系统组织结构为例,管理系统里有一个部门department表用于存放部门信息,因为部门下面可能有子部门所以表中的字段要定义成类似树形结构的 ...

  2. java笔记--关于线程死锁

    关于线程死锁 什么是死锁: 在编写多线程的时候,必须要注意资源的使用问题,如果两个或多个线程分别拥有不同的资源, 而同时又需要对方释放资源才能继续运行时,就会发生死锁. 简单来说:死锁就是当一个或多个 ...

  3. 2012年湖南省程序设计竞赛E题 最短的名字

    题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1115 解题报告:输入n个字符串,让你求出可以用来区别这些字符串的最少的前缀总共有多少个字 ...

  4. onfiguration problem: Unable to locate Spring NamespaceHandler for XML schema namespace [http://www.springframework.org/schema/security]

    org.springframework.beans.factory.parsing.BeanDefinitionParsingException: Configuration problem: Una ...

  5. php友好格式化时间

    php格式化时间显示 function toTime($time) {//$time必须为时间戳 $rtime = date("Y-m-d H:i",$time); $htime ...

  6. Linux下 ntp 时间同步服务ntpd 出现 the NTP socket is in use, exiting 解决

    [root@EPDDB log]# [root@EPDDB log]# ntpdate 10.154.8.200 6 Sep 09:35:09 ntpdate[30210]: the NTP sock ...

  7. Java常用排序算法+程序员必须掌握的8大排序算法

    概述 排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存. 我们这里说说八大排序就是内部排序. 当n较大, ...

  8. 《转》IIS中配置通配符应用程序映射

    本文转载自龚赤兵 电子工业出版社,如给您带来不便之处,请联系博主. eb开发新体验:ASP.NET 3.5 MVC架构与实战>第13章网站部署,本章主要实现了如何在IIS 6.0中一步一步地成功 ...

  9. Django中如何查找模板

    参考:http://my.oschina.net/zuoan001/blog/188782 Django的setting中有关找模板的配置有如下两个: TEMPLATE_LOADERS TEMPLAT ...

  10. iOS UITableView 的beginUpdates和endUpdates

    在官方文档中是这样介绍beginUpdates的 Call this method if you want subsequent insertions, deletion, and selection ...