$(document).ready(funct..." />
 手机
当前位置:查字典教程网 >网页设计 >HTML5教程 >html5教程实现Photoshop渐变色效果
html5教程实现Photoshop渐变色效果
摘要:HTML5画线、圆、矩形http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.m...

<!DOCTYPE html><head>

<meta charset=utf-8>

<title>HTML5画线、圆、矩形</title>

<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>>

</head>

<script>

$(document).ready(function(){

var c=document.getElementById("drawbox");

var draw=c.getContext("2d"); //获取2d内容的引用,调用绘图API</p> <p>//指定渐变区块

var grd=draw.createLinearGradient(50,50,200,50); //坐标,长宽

grd.addColorStop(0,"black"); //起点颜色

grd.addColorStop(1,"green"); //终点颜色</p> <p>draw.fillStyle=grd; //设为填充样式

draw.fillRect(50,50,200,50); //填充进矩形内

})

</script>

</body>

<canvas id="drawbox" width="500" height="500"></canvas>

</body>

</html>

效果图:

html5教程实现Photoshop渐变色效果1

【html5教程实现Photoshop渐变色效果】相关文章:

Html5实现二维码扫描并解析

html5 css3网站菜单实现代码

html5 web本地存储将取代我们的cookie

html5基础教程常用技巧整理

html5 利用canvas实现超级玛丽简单动画

html5 canvas 简单画板实现代码

编写html5时调试发现脚本php等网页js、css等失效

纯html5+css3下拉导航菜单实现代码

基于html5 canvas实现漫天飞雪效果实例

html5 兼容IE6结构的实现代码

精品推荐
分类导航