Home > Developer > Web Develop
<! DOCTYPE html5>
<meta charset= "UTF-8" >
<title>css3-canvas Canvas (gradient) </title>
<script>
Window.onload=function () {
var Canvas=document.getelementbyid ("Canvas");//Get the Canvas object
var Ctx=canvas.getcontext ("2d"); Create a two-dimensional drawing context object
var gra=ctx.createlineargradient (0,0,200,200);//Create a Gradient object and specify the direction of the gradient fill
Coordinates (0,0) to (200,200)
Gra.addcolorstop (0, "Lightpink");
Gra.addcolorstop (0.5, "lightblue");
Gra.addcolorstop (1, "LightGreen");
Ctx.fillstyle=gra;//gra gradient objects are typically used as property values for FillStyle or Strokestyle
Ctx.fillrect (50,50,200,200); The starting coordinate is (50,50) a rectangle with a fill width of 200
}
</script>
<body>
<canvas id= "Canvas" width= "height=" style= "border:1px solid Red" >
Browser does not support canvas
</canvas>
</body>Css3-canvas Canvas (gradient)
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
