<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid;">

        The current browser does not support Canvas, can replace the browser a try!

    </canvas>

    <script>

        window.onload = function(){

            var canvas = document.getElementById('canvas');

            canvas.width = 800;

            canvas.height = 800;

            if(canvas.getContext('2d')){

                var context = canvas.getContext('2d');

                // begin

                var linearGrad = context.createLinearGradient(0,0,200,800);

                linearGrad.addColorStop(0.0,'white');

                linearGrad.addColorStop(0.25,'yellow');

                linearGrad.addColorStop(0.5,'green');

                linearGrad.addColorStop(0.75,'blue');

                linearGrad.addColorStop(1.0,'black');

                context.fillStyle = linearGrad;

                context.fillRect(0,0,800,800)

            }else{

                alert('当前游览器不支持Canvas，请更换游览器后再试！');

            }

        }

    </script>

</body>

<script>

    /*总结

    step 1

        //修改xstart,ystart,xend,yend 改变渐变方向

        //修改fillRect 改变渐变区域

        var grd = context.creatLinearGradient(xstart,ystart,xend,yend)

    step 2

        //stop的值域[0,1]

        grd.addColorStop(stop,color)

    */

</script>

</html>

canvas-3linearGradient.html的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. Visual Studio Code 写Python 代码

    最近在博客园新闻里面看到微软发布的Visual Studio Code 挺好用的,现在在学习Python,查看官网发布的VSCode 是支持Python代码,自己试着安装用一下,下面是我的安装以及配置 ...

  2. Linux pwn入门教程(2)——shellcode的使用，原理与变形

    作者:Tangerine@SAINTSEC 0×00 shellcode的使用 在上一篇文章中我们学习了怎么使用栈溢出劫持程序的执行流程.为了减少难度,演示和作业题程序里都带有很明显的后门.然而在现实 ...

  3. Cellular Traffic Offloading

    Reference: [1] Mobile Data Offload for 3G Networks [2] Mobile Data Offloading through Opportunistic ...

  4. Spring Boot 配置随机数技巧

    Spring Boot支持在系统加载的时候配置随机数. 添加config/random.properties文件,添加以下内容: #随机32位MD5字符串 user.random.secret=${r ...

  5. docker 容器时间和系统时间不一致

    docker cp /etc/localtime 容器名:/etc/localtime cp /etc/localtime 24fe94504424:/etc/localtime date -s 09 ...

  6. yarn依赖管理工具，和fis3构建工具 gulp详细用法

    看视频所了解到的,正在进行摸索. 参考:https://www.cnblogs.com/2050/p/4198792.html这篇介绍gulp的文章非常棒,唯一有一点,页面随时刷新的目前还没实现,不知 ...

  7. 阅读Google Protocol Buffers 指南，整理pb语法

    官方网站: https://developers.google.com/protocol-buffers/docs/proto3 1.简单定义一个Message 类型 pb语法文件以"*.p ...

  8. OpenStack 单元测试

    OpenStack 单元测试 OpenStack开发——单元测试 本文将介绍OpenStack单元测试的部分.本文将重点讲述Python和OpenStack中的单元测试的生态环境. openstack ...

  9. 在Ubuntu中搭建KMS服务器

    介绍 基于vlmcsd搭建的KMS服务器. 根据github上的说明,这个工具是用C写的,没有任何依赖,可以直接运行.而且它横跨几乎现在所有的系统平台,如Android, FreeBSD, Solar ...

  10. C51 玄学问题，magic

    0x00 问题代码 void int0_isr(void) interrupt 0 { num++; if (num%2 == 1) { uint k; for(k=0;k<3;k++) { P ...