[html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形
在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形。其中,左上方的点,为坐标轴原点(0,0)。
1、绘制渐变图形
<!DOCTYPE html> <html> <head> <title></title> <script> function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext("2d"); var g1 = context.createLinearGradient(0,0,0,300); g1.addColorStop(0,"rgb(255,255,0)"); g1.addColorStop(1,"rgb(0,255,255)"); context.fillStyle = g1; context.fillRect(0,0,500,500); var g2 = context.createLinearGradient(0,0,300,0); g2.addColorStop(0,"rgba(0,0,255,0.5)"); g2.addColorStop(1,"rgba(255,0,0,0.5)"); for(var i=0;i<10;i++){ context.beginPath(); context.fillStyle = g2; context.arc(i*25,i*25,i*10,0,Math.PI*2,true); context.closePath(); context.fill(); } } </script> </head> <body onload="draw('canvas')"> <!--LinearGradient context.createLinearGradient(xstart,ystart,xend,yend) addColorStop(offset,color) addColorStop(offset,color) --> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>
2、绘制径向渐变
<!DOCTYPE html> <html> <head> <title></title> <script> function draw(id){ var canvas = document.getElementById(id); if(canvas==null){ return false; } var context = canvas.getContext("2d"); var g1 = context.createRadialGradient(400,0,0,400,0,400); <!--6个参数:起始点的坐标,半径,结束点的坐标,半径--> g1.addColorStop(0.1,"rgb(255,255,0)"); g1.addColorStop(0.3,"rgb(255,0,255)"); g1.addColorStop(1,"rgb(0,255,255)"); context.fillStyle = g1; context.fillRect(0,0,500,500); } </script> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>
3、绘制变形图形
变形方式:平移、缩放、旋转
<!DOCTYPE html> <html> <head> <title></title> <script> function draw(id){ var canvas = document.getElementById(id); if(canvas==null){ return false; } var context = canvas.getContext("2d"); context.fillStyle = "#eeeeef"; context.fillRect(0,0,500,500); context.translate(200,50); context.fillStyle = "rgba(255,0,0,0.25)"; for(var i=0;i<50;i++){ context.translate(25,25); context.scale(0.95,0.95); context.rotate(Math.PI/10); context.fillRect(0,0,100,50); } } </script> </head> <body onload="draw('canvas')"> <!--平移:translate(x,y) 缩放:scale(x,y) 旋转:rotate(deg)--> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>
[html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形的更多相关文章
- [html5] 学习笔记-Canvas标签的使用
Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...
- [html5] 学习笔记-Canvas应用
通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- [html] 学习笔记-Canvas图形绘制处理
使用Canvas API 可以将一个图形重叠绘制在另外一个图形上,也可以给图形添加阴影效果. 1.Canvas 图形组合 通过 globalCompositeOperation = 属性 来指定重叠效 ...
- html5学习笔记:canvas
1.什么是canvas? 可以绘制图形的标签.一般用javascript来绘制. 2.创建一个画布 <!DOCTYPE html> <html> <head> &l ...
- HTML5学习笔记之canvas
标签 canvas标签有一个默认宽高:300*150: canvas的宽高一般写到行间样式中,写在style会有问题详细请看这里: 绘制环境 要绘图先要获取到绘制环境: var oC = docume ...
随机推荐
- codeforces #304 DIV2
先送上一篇题解(虽然全英文的):http://codeforces.com/blog/entry/18034 A题:http://codeforces.com/problemset/problem/5 ...
- STM32单片机在Keil5下仿真的问题解决及GPIO口初始化、使用
STM32单片机在Keil5下仿真的问题解决及GPIO口初始化.使用 最近看了视频,里面有仿真,可以清楚看到GPIO口的数据变化,也想尝试下,DUG时却出现*** error 65: access v ...
- X-007 FriendlyARM tiny4412 u-boot移植之内存初始化
<<<<<<<<<<<<<<<<<<<<<<<<< ...
- 360路由器设置网段ip
路由器设置->高级设置->修改路由器地址
- [转]配置 VIM 的 Go 语言开发环境
本文是针对像我这样的 VIM 小白而写的,所使用的 VIM-GO 插件虽然步骤简单但不够详细,特写此文以做记录和分享.欢迎各位大神纠正补充! 特别说明 本博文不是 Go 语言环境搭建教程,只是 VIM ...
- iOS Socket第三方开源类库 ----AsyncSocket 分类: ios相关 ios技术 2015-03-11 22:14 59人阅读 评论(0) 收藏
假如你也是一个java程序员,而你又不是很懂Socket. 下面我的这篇文章也许能帮助你一些. http://xiva.iteye.com/blog/993336 首先我们写好上面文章中的server ...
- CocoaPods安装和使用教程 分类: ios技术 ios相关 2015-03-11 21:53 48人阅读 评论(0) 收藏
目录 CocoaPods是什么? 如何下载和安装CocoaPods? 如何使用CocoaPods? 场景1:利用CocoaPods,在项目中导入AFNetworking类库 场景2:如何正确编译运行一 ...
- Cocos2d-x 的“HelloWorld” 深入分析
本节所用Cocos2d-x版本:cocos2d-1.0.1-x-0.12.0 不能免俗,一切都从“HelloWorld!”开始.打开HelloWorld工程,里面有两个文件目录Classes和win3 ...
- IOS开发-UI学习-根据URL显示图片,下载图片的练习(button,textfield,image view,url,data)
编写一个如下界面,实现: 1.在文本输入框中输入一个网址,然后点击显示图片,图片显示到UIImageView中. 2.点击下载,这张显示的图片被下载到手机的Documents文件夹下的Dowmload ...
- MongoDB升级教程
1.排序 sort()方法:其中 1 为升序排列,而-1是用于降序排列. db.col.find({},{"title":1,_id:0}).sort({"likes&q ...