| canvas基础 | 您所在的位置：网站首页 › js设置字体颜色渐变 › canvas基础 |
canvas基础
|
1.设置背景
demo.html createPattern(obj,'repeat') canvas学习 body{background: black} #c1{background: white} span{color: white} window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var yImg = new Image() yImg.onload = function(){ draw(this) } yImg.src = '../img/2.png' function draw(obj){ var bg = oGC.createPattern(obj,'repeat') oGC.fillStyle = bg oGC.fillRect(0,0,300,300) } } 不支持canvas浏览器
线型渐变demo.html createLinearGradient(150,100,150,200)//(起始点坐标x,起始点坐标y，结束点坐标x,结束点坐标y) canvas学习 body{background: black} #c1{background: white} span{color: white} window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var obj = oGC.createLinearGradient(150,100,150,200)//(起始点坐标x,起始点坐标y，结束点坐标x,结束点坐标y) obj.addColorStop(0,'red')//起点位置的颜色 obj.addColorStop(1,'blue')//终点位置的颜色 oGC.fillStyle = obj oGC.fillRect(150,100,100,100) } 不支持canvas浏览器
放射性渐变demo.html createRadialGradient(200,200,100,200,200,150)//createRadialGradient第一个圆的坐标和半径，第二个圆的坐标和半径 canvas学习 body{background: black} #c1{background: white} span{color: white} window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var obj = oGC.createRadialGradient(200,200,100,200,200,150)//createRadialGradient第一个圆的坐标和半径，第二个圆的坐标和半径 obj.addColorStop(0,'red') obj.addColorStop(0.5,'yellow') obj.addColorStop(1,'blue') oGC.fillStyle = obj oGC.fillRect(0,0,oC.width,oC.height) } 不支持canvas浏览器
|
【本文地址】
公司简介
联系我们