Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body> <CanvasID= "Canvas"style= "margin:0 auto;border:1px #ddd solid;">the current browser does don't support Canvas, can replace the browser a try! </Canvas> <Script>window.onload= function(){ varCanvas=document.getElementById ('Canvas'); Canvas.width= -; Canvas.height= -; if(Canvas.getcontext ('2d')){ varContext=Canvas.getcontext ('2d'); //begin varLineargrad=Context.createlineargradient (0,0, $, -); 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, -, -) }Else{alert ('the current browser does not support canvas, please change the viewer and try again! '); } } </Script></Body><Script> /*Summary Step 1//Modify Xstart,ystart,xend,yend Change the gradient direction//Modify FillRect Change the gradient area var grd = Context.creatlinear Gradient (xstart,ystart,xend,yend) Step 2//stop range [0,1] grd.addcolorstop (stop,color)*/</Script></HTML>
Canvas-3lineargradient.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
