html5 canvas 标签绘制图像且渐变色处理
来源:互联网 发布:电脑美工收入 编辑:程序博客网 时间:2024/05/21 10:00
html5 提供了很多很强大的功能,有些功能甚至可以摆脱服务器的限制,减少对服务器的访问。canvas就是一个html5 新增的强大标签。虽然功能有待完善,但已然可以解决一些网页问题。
今天主要讲canvas的网页绘制图像的功能,它有点像VC的windows API。
在html中添加如下
<canvas id="my" width="200" height="100">您的浏览器版本过低</canvas>
<script>var c=document.getElementById("my");//寻找canvas对象
var context=c.getContext("2d");// getContext(2d)是内建的HTML5对象拥有多种绘画路径,矩形,圆形,字符以及添加图像的方法//绘画矩形
context.fillStyle="#ccc";// 填充色,对闭合图形起作用
context.fillRect(0,0,150,75);//前两个参数为左上方坐标,后两个为右下方
//绘画直线
context.strokeStyle="#000";//画笔颜色
context.lineWidth=2;//画笔粗细,注意:没有单位
context.beginPath();//开始划线
context.moveTo(20,0);//起点
context.lineTo(20,20);//终点context.stroke();//结束划线
//绘画折线图案
context.fillStyle="#ccc";// 填充色,对闭合图形起作用
context.strokeStyle="#000";//画笔颜色
context.lineWidth=2;//画笔粗细,注意:没有单位
context.beginPath();//开始划线
context.moveTo(20,0);//起点
context.lineTo(20,20);//下个点context.lineTo(20,40);//终点
context.fill();//自动连接头尾,并用填充色填充闭合图形
context.closePath();//结束路径
//添加文本
context.font="italic bold 24px serif";//设置文本的风格,[font style] [font weight] [font size] [font face]四个参数
context.fillText("文本",10,20);//添加文本,后两个表示开始添加的位置
//渐变效果
var gradient=context.createLinearGradient(0,0,0,40);//前两个参数为渐变开始的横纵坐标,后两个为渐变结束点的横纵坐标
gradient.addColorStop(0,"color1");//起始颜色
gradient.addColorStop(1,"color2");//终止颜色
context.fillStyle=gradient;
context.strokeStyle=gradient;
</script>
- html5 canvas 标签绘制图像且渐变色处理
- HTML5标签canvas图像处理
- HTML5 Canvas 绘制图像
- 利用HTML5的canvas标签实现灰太狼图像的绘制
- HTML5 Canvas绘制渐变(一)
- HTML5 Canvas绘制渐变(二)
- Html5实例: <canvas>绘制渐变图形
- Html5学习------canvas绘制径向渐变图形
- html5 canvas学习--绘制线性渐变
- html5 canvas学习--绘制径向渐变
- HTML5 Canvas 画图标签、画线、圆、渐变色
- 第四讲 HTML5 Canvas 画图标签 & 画线,圆,渐变色
- HTML5 Canvas 画图标签 & 画线,圆,渐变色
- canvas绘制之渐变色
- HTML5利用Canvas绘制图形(绘制渐变、模式、变换)
- html5学习canvas图像处理
- HTML5 Canvas(画布)图像处理
- html5 canvas 绘制图像、画布或视频
- 线程间的通信与同步
- ExtJs 格式化字符串:去除行首、行尾空格、换行符
- 2013 ACM-ICPC吉林通化全国邀请赛 && HDU 4499 Cannon (搜索)
- final关键字
- codeforces 466B Wonder Room 数学?
- html5 canvas 标签绘制图像且渐变色处理
- karatsuba乘法及相关实现
- UVA - 227 Puzzle
- 队列基本操作
- JAVA 日期赋值及比较
- php使用命名空间:别名/导入
- 微信支付文档链接
- iOS多线程使用实例(异步下载图片的时候不会阻塞主线程的执行)
- 利用结果集元数据将查询结果封装成Map