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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>填充渐变形状</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

    canvasApp();

}

function canvasSupport(){

    return Modernizr.canvas;

}

function canvasApp(){

    if(!canvasSupport()){

        return;

    }else{

        var theCanvas = document.getElementById('canvas')

        var context = theCanvas.getContext("2d")

    }

    drawScreen();

    function drawScreen(){

        //水平渐变值必须保持为0

        var gr = context.createLinearGradient(0,0,100,0);

        //添加颜色端点

        gr.addColorStop(0,'rgb(255,0,0)');

        gr.addColorStop(.5,'rgb(0,255,0)');

        gr.addColorStop(1,'rgb(0,0,255)');

        //应用fillStyle生成渐变

        context.fillStyle = gr;

        context.fillRect(0,0,100,100);

    }

}

</script>

<canvas id="canvas" width="500" height="500">

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！

</canvas>

</body>

</html>

在画布上创建渐变填充有两个基本选项：线性或者径向。线性渐变创建一个水平、垂直或者对角线的填充图案。径向渐变自中心店穿件一个放射状填充

html5 canvas 填充渐变形状的更多相关文章

  1. html5 canvas 多个填充渐变形状

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

  2. html5 canvas 奇怪的形状垂直渐变

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

  3. html5 canvas 奇怪的形状水平渐变（因为大多数的之前的文章把基础都打过了，所以开始写的快了，如果有不明白的，可以回顾下之前的）

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

  4. HTML5 Canvas 填充与描边(Fill And Stroke)

    HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...

  5. [HTML5] Canvas绘制简单形状

    使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...

  6. HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill

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

  7. html5 canvas 径向渐变2

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

  8. html5 canvas 径向渐变

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

  9. html5 canvas 对角线渐变

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

随机推荐

  1. Katalon Studio学习笔记(二)——请求响应中文乱码解决方法

    Katalon Studio接口测试发现返回的中文消息是乱码,这是因为KS的编码格式是UTF-8,因此导致中文字体出现乱码.如下图所示: 在我们的系统中添加一个名字为JAVA_TOOL_OPTIONS ...

  2. 区块链Hyperledger Fabric 学习记录（一）开发环境搭建（ubuntu16.04/ubuntu18.04）

    目录 Fabric开发环境搭建 更新说明 教程环境及软件版本 Docker 安装Docker 配置用户组 配置Aliyun Docker加速器 安装docker-compose Go 下载源码 安装源 ...

  3. MongoDB 安装教程

    前言: MongoDB是一个基于分布式文件存储的数据库.由C++旨在为WEB应用提供可扩展的高性能数据存储解决方案. 官方网站:https://www.mongodb.com/ 本次教程只针对wind ...

  4. 1089. Insert or Merge (25)-判断插入排序还是归并排序

    判断插入排序很好判断,不是的话那就是归并排序了. 由于归并排序区间是2.4.8开始递增的,所以要判断给出的归并排序执行到哪一步,就要k从2开始枚举. 然后再对每个子区间进行一下sort即可. #inc ...

  5. Alpha版本项目展示要求（加入模板）

    Alpha版本展示的时间暂定为11月17日课上,提前到13:00开始.如有变动,另行通知. Alpha版本项目展示要求如下: 不得使用PPT,展示所用的资料必须发表在博客上. 现场演示你们发布的软件. ...

  6. Spring sprint @ first day

    前几天,我们讨论出任务划分.结合任务及个人情况,我认领校园网认证和网盘服务这块. 认证原理整3天,尝试编译2天,整合模块5天. 日期 时间 地点 工作 5.11 20:00 九实 下载mentohus ...

  7. 第一次冲刺阶段后五天总结和第一次 Sprint

    第一次冲刺阶段后五天总结(11.16-11.20) 一.准备实现的功能 1 在游戏中随机显示式子 点击进入答题则进入答题界面,显示式子 2 设置限时或者规定答题数目模式 进入游戏,选择不同模式 3 产 ...

  8. NetScaler 10.1的配置以及结合StoreFront的部署

    工作需要,所以英文+中文,绝壁不是装逼...(关于这点勿喷) This post will cover only the basics for getting NetScaler up and run ...

  9. Java之递归遍历目录，修改指定文件的指定内容

    EditProperties.java package PropertiesOperation.Edit; import java.io.File; /** * 替换指定Porpoerties文件中的 ...

  10. C# 妈妈再打我一下生成器

    设计背景 网上很火的一个"妈妈再打我一下"的漫画图片,给了网友无限的想象发挥空间,此小程序可以给图片添加配文的形式,快速生成图片 设计思路 GDI+ 绘图技术,在图片基础上添加文字 ...