canvas 渐变

那么第一种渐变方式就是LinearGradient，具体实施就是以下代码：

var colorStyle=context.createLinearGradient(0,0,0,HEIGHT);
colorStyle.addColorStop(0.0,"#000");
colorStyle.addColorStop(1.0,"#3300ff");
context.fillStyle=colorStyle;

上面这种属于线性渐变，还有一种径向渐变：

context.createRadialGradient(200,200,0,400,400,500);这六个属性分别代表第一个圆心x,y和r,还有第二个圆心的x,y,和r.

时间： 2024-10-26 22:28:56

canvas 渐变的相关文章

canvas渐变

代码: 1 /** 2 * Created by Administrator on 2016/1/29. 3 */ 4 function draw(id){ 5 var canvas = document.getElementById(id); 6 var context = canvas.getContext("2d"); 7 // var grd = context.createLinearGradient(0,0,300,0); 8 var grd = context.creat

canvas插入图片设置背景，渐变

##在canvas中插入图片(需要image对象) 1.canvas操作图片时,必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标. 这个方法多了2个参数:width 和 height,这两个参数用来控制当像canvas画入时应该缩放的大小 window.onload=function(){ var canvas=documen

canvas画板基础应用的学习

canvas是html5中的绘图容器,我们可以通过javascript的控制来进行图形的绘制,绘制对象可以是路径.盒.圆.字符等,同时,你也可以通过js给画布添加图像,下面来介绍canvas的各种基本的用法: 1.首先,我们需要在html标签中创建一个canvas标签,并且通过脚本对其进行引入. <canvas id="myCanvas" width="200" height="100" style="border:1px sol

JavaScript强化教程——canvas

本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:JavaScript强化教程 -- canvas 使用 strokeText(): 使用 "Arial" 字体在画布上绘制一个高 30px 的文字(空心): JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial";

关于HTML5画布canvas的功能

一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas> 2.使用JavaScript来绘制图像 <script> Var c=document.getElementByID(“myCanvas”)//得到画布 Var ctx=c.getContext(“2d”);//得到画笔 Cxt.fillS

HTML5 <canvas> 元素用于图形的绘制,通过脚本(通常是javascript)完成

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形可以通过多种方法使用canvas绘制路径\盒\圆以及添加图像创建一个画布(Canvas) 一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制. 注意: 默认情况下 <canvas> 元素没有边框和内容. <canvas>简单实例如下: <canvas id="myCanvas" width="200" height="100&

HTML5 学习02——新元素:canvas

HTML5 Canvas <canvas>标签:使用脚本 (通常是JavaScript)来绘制图形--默认情况下 <canvas> 元素没有边框和内容. 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. <canvas id="myCanvas" width="200" height="100"></canvas> 注:指定一个id属性 (脚本中经常引用), width

HTML5 新元素、HTML5 Canvas

HTML5 新元素自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者,等. <canvas> 新元素标签描述 <canvas> 标签定义图形,比如图表和其他图像.该标签基于 JavaSc

HTML5: HTML5 Canvas

ylbtech-HTML5: HTML5 Canvas 1.返回顶部 1. HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形. 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. 什么是 canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 你可以通过多种方法使用