html5教程实现Photoshop渐变色效果_html5教程技巧

来源：动视网责编：小采时间：2020-11-27 15:18:24

html5教程实现Photoshop渐变色效果_html5教程技巧

html5教程实现Photoshop渐变色效果_html5教程技巧:代码如下: HTML5画线、圆、矩形http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

推荐度：

点击下载本文 文档为doc格式

导读html5教程实现Photoshop渐变色效果_html5教程技巧:代码如下: HTML5画线、圆、矩形http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

代码如下:

HTML5画线、圆、矩形
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d"); //获取2d内容的引用，调用绘图API

//指定渐变区块
var grd=draw.createLinearGradient(50,50,200,50); //坐标，长宽
grd.addColorStop(0,"black"); //起点颜色
grd.addColorStop(1,"green"); //终点颜色

draw.fillStyle=grd; //设为填充样式
draw.fillRect(50,50,200,50); //填充进矩形内
})

效果图：