按照官方例子画了几个基本图形,算是对于HTML5 Canvas有所了解，但是感觉这里面数学知识太忘记了，虽然以前数学竞赛出身，但是好多年不用了，有所遗忘。
HTML5的canvas元素只是提供了一个画布，而实际的绘制工作由javascript来完成。
基本HTML不说了， 也就是搭一个架子，放一个<canvas>元素，然后首部引入一些javascript文件，这里面每一个js文件都是一个画图的例子.
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title>HTML5 Canvas DEMO</title>
- <script type="text/javascript" src="js/drawRect.js"></script>
- <script type="text/javascript" src="js/drawPath.js"></script>
- <script type="text/javascript" src="js/drawLine.js"></script>
- <script type="text/javascript" src="js/drawLinearGradient.js"></script>
- <script type="text/javascript" src="js/drawTransformShape.js"></script>
- <script type="text/javascript" src="js/drawAll.js"></script>
- </head>
- <body onload="drawAll('canvas')"></body>
- <h3>canvas：放开你的梦想</h3>
- <canvas id="canvas" width="400" height="300"/>
- <br><br>
例子1：绘制矩形
- /**
- * This file is confidential by Charles.Wang
- * Copyright belongs to Charles.wang
- * You can make contact with Charles.Wang (charles_wang888@126.com)
- */
- //这段js代码用于画一个长方形
- //参数是传进来的画布canvas的id,表明这段代码画在哪里
- function drawRect(id){
- //取得canvas对象，也就是我们js代码要画的canvas对象
- var canvas=document.getElementById('canvas');
- if (canvas==null)
- return false;
- //从canvas取得图形上下文，这个图形上下文context封装了许多绘画方法，这是一个内置的html5对象
- var context=canvas.getContext('2d');
- //设定好当前图形上下文的样式，夜就是当前使用颜色来绘制图形，此外还有一些其他的样式
- context.fillStyle="#0044FF";
- //fillXXX用来填充图形的内部，这里fillRect，表明用当前颜色填充图形内部，4个参数分别为起点横坐标/起点纵坐标/宽度/高度
- context.fillRect(0,0,400,300);
- //颜色值既可以用十六进制命名，也可以使用颜色名
- context.fillStyle="red";
- context.strokeStyle="blue";
- //用于设置图形边框的宽度
- context.lineWidth=1;
- context.fillRect(50,50,100,100);
- //strokeXXX用来描述图形的边框(stroke),这里strokeRect，表明用来绘制刚才矩形的边框
- context.strokeRect(50,50,100,100);
- }
画出来的结果是：
例子2：用Path来绘制一组圆形：
- /**
- * This file is confidential by Charles.Wang
- * Copyright belongs to Charles.wang
- * You can make contact with Charles.Wang (charles_wang888@126.com)
- */
- function drawPath(id){
- var canvas=document.getElementById(id);
- if(canvas == null)
- return false;
- //依旧先拿到canvas对象和上下文对象
- var context = canvas.getContext("2d");
- //先绘制画布的底图
- context.fillStyle="#EEEEEF";
- context.fillRect(0,0,400,300);
- //用循环绘制10个圆形
- var n = 0;
- for(var i=0 ;i<10;i++){
- //开始创建路径，因为要画圆，圆本质上也是一个路径，这里向canvas说明，我要开始画了，这是起点
- context.beginPath();
- //画一个拱形(arcade)，因为圆是一种特殊的拱形
- //6个参数分别是 起点横坐标，起点纵坐标，圆的半径，起始弧度，结束弧度（2PI刚好是360度），是否顺时针
- context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
- //关闭路径
- context.closePath();
- context.fillStyle="rgba(255,0,0,0.25)";
- //填充刚才所画的圆形
- context.fill();
- }
- }
画出来的结果是：
例子3：绘制直线，并且用直线组合复杂图形
- /**
- * This file is confidential by Charles.Wang
- * Copyright belongs to Charles.wang
- * You can make contact with Charles.Wang (charles_wang888@126.com)
- */
- function drawLine(id){
- var canvas=document.getElementById(id);
- if(canvas==null)
- return false;
- var context = canvas.getContext('2d');
- context.fillStyle="#FF00FF";
- context.fillRect(0,0,400,300);
- var n=0;
- var dx=150;
- var dy=150;
- var s = 100;
- context.beginPath();
- context.fillStyle='rgb(100,255,100)';
- context.strokeStyle='rgb(0,0,100)';
- var x = Math.sin(0);
- var y = Math.cos(0);
- var dig=Math.PI/15*11;
- for(var i = 0;i<30;i++){
- var x = Math.sin(i*dig);
- var y = Math.cos(i*dig);
- //用三角函数计算顶点
- context.lineTo(dx+x*s,dy+y*s);
- }
- context.closePath();
- context.fill();
- context.stroke();
- }
画出来的结果是：
例子4：使用线性渐变
- /**
- * This file is confidential by Charles.Wang
- * Copyright belongs to Charles.wang
- * You can make contact with Charles.Wang (charles_wang888@126.com)
- */
- //渐变用于填充，是指填充图形时从某种颜色慢慢过渡到另外一种颜色
- //线性渐变是指在一个线段之间进行渐变，线段上每个点随着离开起点的位移值的变化，其颜色也在变化
- function drawLinearGradient(id){
- var canvas = document.getElementById(id);
- if(canvas==null)
- return false;
- //我们还是先绘制底图，这次，我们的底图也用了渐变
- var context = canvas.getContext('2d');
- //第一个渐变，用于底图，它调用了createlinearGradient创建了一个渐变
- //4个参数分别为起点的横坐标,起点的纵坐标，结束点的横坐标，结束点的纵坐标，所以本例就是从(0,0)到(0,300)，所以是一个竖直向下的渐变
- var gradient1=context.createLinearGradient(0,0,0,300);
- //addColorStop可以设置渐变的颜色，第一个参数表示偏移量（0-1）之间，第二个参数表示颜色
- //所以，我们定义了从×××到蓝色的渐变
- gradient1.addColorStop(0,'rgb(255,255,0)');
- gradient1.addColorStop(1,'rgb(0,255,255)');
- //将上下文对象关联到当前的渐变设定作为填充风格
- context.fillStyle=gradient1;
- //用我们定义的渐变来绘制底图
- context.fillRect(0,0,400,300);
- var n = 0;
- //这次我们要画一组圆圈，我们定义一个从(0,0)到(300,0)也就是水平方向从左到右的渐变
- var gradient2=context.createLinearGradient(0,0,300,0);
- //设置渐变色的起始颜色和终止颜色
- gradient2.addColorStop(0,'rgba(0,0,255,0.5');
- gradient2.addColorStop(1,'rgba(255,0,0,0.5)');
- //用循环画圆，并且用渐变色填充
- for(var i=0;i<10;i++){
- context.beginPath();
- context.fillStyle=gradient2;
- context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
- context.closePath();
- context.fill();
- }
- }
画出来的结果是：
例子5：图形基本变换（平移，缩放，旋转）
- /**
- * This file is confidential by Charles.Wang
- * Copyright belongs to Charles.wang
- * You can make contact with Charles.Wang (charles_wang888@126.com)
- */
- //这个函数用于演示一些常用的坐标变换
- //常见的坐标变换有平移，缩放，旋转
- function drawTransformShape(id){
- var canvas = document.getElementById(id);
- if(canvas == null)
- return false;
- //画底图
- var context = canvas.getContext('2d');
- context.fillStyle="#FF00FF";
- context.fillRect(0,0,400,300);
- //移动坐标轴的原点，因为这里向右边平移了200，向下移动了50，所以水平方向是居中了
- context.translate(200,50);
- //循环可以画一系列的五角星
- for(var i=0;i<50;i++){
- //每次坐标轴的原点往右下各移动25像素
- context.translate(25,25);
- //并且每次进行缩放到0.95倍
- context.scale(0.95,0.95);
- //然后把这个图形进行旋转，每次转动+18度（也就是顺时针）
- context.rotate(Math.PI/10);
- //然后在当前位置画一个五角星
- create5star(context);
- //并且填充当前五角星
- context.fill();
- }
- }
- //这个函数用于绘制一个五角星
- function create5star(context){
- var n = 0;
- var dx = 100;
- var dy = 0 ;
- var s = 50;
- //创建路径
- context.beginPath();
- context.fillStyle="rgba(255,0,0,0.5)";
- var x = Math.sin(0);
- var y= Math.cos(0);
- var dig = Math.PI/5 *4;
- //画五角星的五条边
- for(var i = 0;i<5;i++){
- var x = Math.sin(i*dig);
- var y = Math.cos(i*dig);
- context.lineTo(dx+x*s,dy+y*s);
- }
- context.closePath();
- }
画出来的结果是：
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
