[html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形。其中,左上方的点,为坐标轴原点(0,0)。

1、绘制渐变图形

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <script>
 6         function draw(id){
 7             var canvas = document.getElementById(id);
 8             var context = canvas.getContext("2d");
 9             var g1 = context.createLinearGradient(0,0,0,300);
10             g1.addColorStop(0,"rgb(255,255,0)");
11             g1.addColorStop(1,"rgb(0,255,255)");
12             context.fillStyle = g1;
13             context.fillRect(0,0,500,500);
14
15             var g2 = context.createLinearGradient(0,0,300,0);
16             g2.addColorStop(0,"rgba(0,0,255,0.5)");
17             g2.addColorStop(1,"rgba(255,0,0,0.5)");
18             for(var i=0;i<10;i++){
19                 context.beginPath();
20                 context.fillStyle = g2;
21                 context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
22                 context.closePath();
23                 context.fill();
24             }
25         }
26     </script>
27 </head>
28 <body onload="draw(‘canvas‘)">
29     <!--LinearGradient
30         context.createLinearGradient(xstart,ystart,xend,yend)
31         addColorStop(offset,color)
32         addColorStop(offset,color)
33     -->
34     <canvas id="canvas" width="500" height="500"></canvas>
35 </body>
36 </html>

2、绘制径向渐变

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <script>
 6         function draw(id){
 7             var canvas = document.getElementById(id);
 8             if(canvas==null){
 9                 return false;
10             }
11             var context = canvas.getContext("2d");
12             var g1 = context.createRadialGradient(400,0,0,400,0,400);
13             <!--6个参数:起始点的坐标,半径,结束点的坐标,半径-->
14             g1.addColorStop(0.1,"rgb(255,255,0)");
15             g1.addColorStop(0.3,"rgb(255,0,255)");
16             g1.addColorStop(1,"rgb(0,255,255)");
17             context.fillStyle = g1;
18             context.fillRect(0,0,500,500);
19         }
20     </script>
21 </head>
22 <body onload="draw(‘canvas‘)">
23     <canvas id="canvas" width="500" height="500"></canvas>
24 </body>
25 </html>

3、绘制变形图形

变形方式:平移、缩放、旋转

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <script>
 6         function draw(id){
 7             var canvas = document.getElementById(id);
 8             if(canvas==null){
 9                 return false;
10             }
11             var context = canvas.getContext("2d");
12             context.fillStyle = "#eeeeef";
13             context.fillRect(0,0,500,500);
14             context.translate(200,50);
15
16             context.fillStyle = "rgba(255,0,0,0.25)";
17             for(var i=0;i<50;i++){
18                 context.translate(25,25);
19                 context.scale(0.95,0.95);
20                 context.rotate(Math.PI/10);
21                 context.fillRect(0,0,100,50);
22             }
23         }
24     </script>
25 </head>
26 <body onload="draw(‘canvas‘)">
27     <!--平移:translate(x,y) 缩放:scale(x,y)  旋转:rotate(deg)-->
28     <canvas id="canvas" width="500" height="500"></canvas>
29 </body>
30 </html>
时间: 02-16

[html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形的相关文章

[html5] 学习笔记-Canvas标签的使用

Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括任何已被图形覆盖的对象. 1.Canvas标签 html5中<canvas>元素用于图形的绘制,通过脚本(通常是JavaScript)来完成 <canvas>标签只是图形容器 可以通过多种方法使用Canvas绘制路径.盒.圆.字符以及添加图像 1.1 直接在html5中创建,这种方式采

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

html5学习(一)--canvas画时钟

利用空余时间学习一下html5. 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById('cloc

HTML5学习笔记(二)——表单1

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

Html5学习笔记1 元素 标签 属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

html5学习笔记:canvas

1.什么是canvas? 可以绘制图形的标签.一般用javascript来绘制. 2.创建一个画布 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <canvas id="mycanvas" width="100" height="100"></

HTML5 学习笔记(一)——HTML5概要与新增标签

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5 学习笔记--------》HTML5概要与新增标签!

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

[html5] 学习笔记-表单新增的元素与属性(续)

本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indeterminate属性.Image提交按钮的宽高属性. 1.controls属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素. 1 <body> 2 <script> 3 function setValue(){ 4 var label