【一天一个canvas】绘制一个线性渐变的矩形（五）

渐变是填充的一种相当不错的效果，结合实例2和实例3，我们可以创建一个渐变的矩形

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$(‘can‘);
            var cans = can.getContext(‘2d‘);
            var gnt1 = cans.createLinearGradient(10,0,390,0);
            gnt1.addColorStop(0,‘red‘);
            gnt1.addColorStop(0.5,‘green‘);
            gnt1.addColorStop(1,‘blue‘);
            cans.fillStyle = gnt1;
            cans.fillRect(10,10,380,280);
        }
    </script>
    <body >
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

不解释了，记住fillRect（X,Y,Width,Height）就行了。

时间： 2025-01-07 14:28:06

【一天一个canvas】绘制一个线性渐变的矩形（五）的相关文章

通过HTML5标签canvas绘制一个八卦图案

只需要用到casvas标签和fillStyle.arc.beginPath.closePath.fill方法代码如下: <canvas id="rect" width="310" height="310" style="border:1px yellow solid;"> </canvas> <script> var id=document.getElementById("rec

笔者:本笃庆军原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增.y坐标向下递增. 使用画图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制一个实心的矩形. strokeRect(x,y,width,height) : 绘制一个空心的矩形. clearRect(x,y,width,height) :

用canvas绘制一个简易时钟

在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数字三部分. 2.表盘是个圆,这个简单. 3.绘制指针时,需要先获取到系统时间,然后找到时间和角度的关系. 4.然后利用画圆函数,把起始和终点设为同一角度,即可画出射线(指针). 二. 接下来,我们再分析一下,绘制时钟需要用到的函数. 1.arc(x, y, r, start, stop) x, y

用canvas绘制一个时钟

实现一个时钟的绘制和时间的显示一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>时钟</title> <style type="text/css">

用Canvas绘制一个钟表

效果图: <html> <head></head><body> <canvas id="canvas1"height="500px"width="500px">您的浏览器不支持canvas标签.</canvas> <script> var c=document.getElementById("canvas1"); var clock=c.get

【canvas】绘制一个数字时钟

使用canvas绘制一个数字时钟基础内容下面是此案例中会使用到的一些绘图API //获取绘图上下文 var ctx = canvas.getContext('2d'); //绘制直线 ctx.moveTo(100, 100); ctx.lineTo(700, 700); //绘制曲线 ctx.arc( centerx, centery, radius, //圆心的坐标以及半径的值 startingAngle,endingAngle, //从哪个弧度制开始到那个弧度值结束 anticlockw

HTML5 Canvas ( 线性渐变, 升级版的星空 ) createLinearGradient, addColorStop

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

使用Canvas绘制图形的基本教程

原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: <!doctype html> <html> <head> <meta ch

HTML5—canvas绘制图形（1）

1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“画布”,我们可以利用js脚本在“画布”上绘制图形. 1.1canvas元素在利用canvas绘制图形之前,我们首先需要在页面中放置一个canvas元素,如下代码: <canvas id="mycanvas" width="400" height="40