javascript权威指南第15章使用Canvas绘图

HTML

<!DOCTYPE html>

<html>

    <head>

        <title>canvas</title>

    </head>

    <body>

        <image src="bd_logo1.png"  width='50' height='50' />

        <canvas id='drawing' width="800" height="800" style="border:1px solid #c3c3c3;">A drawing of something.</canvas>

        <canvas id="drawing2" width="800" height="300"></canvas>

        <script type="text/javascript" src="canvas.js" ></script>

    </body>

</html>

//15.1 基本用法

var drawing = document.getElementById('drawing');

// if(drawing.getContext){

//     var context = drawing.getContext('2d');

//     var imgURI =drawing.toDataURL('image/png');

//     var image = document.createElement('img');

//     image.src = imgURI;

//     document.body.appendChild(image);

// }

//15.2 2D上下文

//15.2.1 填充和描边

//确定浏览器支持<canvas>元素

if (drawing.getContext) {

    var context = drawing.getContext("2d");

    context.strokeStyle = 'red';

    context.fillStyle = '#0000ff';

    context.stroke();

}

//15.2.2 绘制矩形

if (drawing.getContext) {

    var context = drawing.getContext('2d');

    /*

     *根据Mozilla的文档

     *http://developer.mozilla.org/en/docs/Cavans_tutorial:Basic_usage

    */

    //绘制红色矩形

    context.strokeStyle = '#FF0000';

    context.strokeRect(10, 10, 50, 50);

    //绘制半透明的蓝色矩形

    context.strokeStyle = 'rgba(0,0,255,0.5)';

    context.strokeRect(30, 30, 50, 50);

    //在两个小矩形重叠的地方清除小矩形

    context.clearRect(40, 40, 10, 10);

}

//15.2.3 绘制路径

// arc(x,y,radius,startAngle,endAngle,counterclocwise)

// 以(x,y)为圆心绘制一条弧线，弧线半径为radius 起始和结束角度(用弧度表示) 分别为startAngle 和endAngle.

// counterclockwise 表示startAngle 和 endAngle是否按逆时针计算，值为false表示顺时针

//arcTo(x1,y1,x2,y2,radius) //从上一点开始绘制一条弧线，到（x2,y2)为止，并且以给定半径radius 穿过（x1,y1)

//bezierCurveTo(c1x,c1y,c2x,c2y,x,y) //从上一点开始绘制一条曲线，到(x,y)为止，并且以（c1x,c1y)和（c2x,c2y)为控制点

//lineTo(x,y) 从上一点开始绘制一条直线，到（x,y)为止。

//moveTo(x,y) 将绘图游标移动到(x,y) , 不画线

//quedraticCurveTo(cx,cy,x,y) 从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy) 作为控制点

//rect(x,y,width,height) 从点(x,y)开始绘制一个矩形，宽度和高度分别是width和height指定，

if (drawing.getContext) {

    var context = drawing.getContext("2d");

    //开始路径

    context.beginPath();

    //绘制外圆

    context.arc(100, 100, 99, 0, Math.PI * 2, false);

    //绘制内圆

    context.moveTo(194,100);

    context.arc(100,100,94,0,2*Math.PI,false);

    //绘制分针

    context.moveTo(100,100);

    context.lineTo(100,15);

    //绘制时针

    context.moveTo(100,100);

    context.lineTo(35,100);

    //描边路径

    context.strokeStyle = '#FF0000';

    context.stroke();

}

//15.2.4 绘制文本

if (drawing.getContext) {

    var context = drawing.getContext("2d");

    context.font ='bold 14px Arial';

    context.textAlign ='center';

    context.textBaseLine ='middle';

    context.fillText('12',100,20);

    //起点对齐

    context.textAlign ='start';

    context.fillText('12',100,40);

    //终点对齐

    context.textAlign ='end';

    context.fillText('12',100,60);

}

//15.2.5 变换

//rotate(angle) 围绕原点旋转图像angle弧度

//scale(scaleX,scaleY) 缩放图像，在x方向乘以sacelX,在y方向乘以scaleY,sacelX,scaleY 默认值是1.0

//translate(x,y)  将坐标原点移动到(x,y),只想这个变换后，坐标会变成之前由（x,y) 点 相当于平移变换

// transform(m1_1,m1_m2,m2_1.m2_2,dx,dy) 直接修改变换矩阵，方式乘以如下矩阵

// m1_1  m1_2 dx

// m2_1  m2_2 dy

// 0      0   1;

//上述是一个旋转+平移矩阵， 实际上是先以原点旋转 ,再平移 dx  dy  上述是一个3*3矩阵

// sina y1 dx

// x1  cosa dy

// 0      0    1 大概是这样的有点忘记矩阵

//假设 x 轴上 x1:100，y1:0 顺时针旋转90° 通过三角函数求 x2,y2

//则 x2= math.sqrt(x1*2+y1*2)*cosa y2= math.sqrt(x1*2+y1*2)*sina

//旋转90 则刚好 x2=0 y2=100 

//利用平移变换画图

if(drawing.getContext){

    var context = drawing.getContext("2d");

    context.translate(200,200); //先利用平移避开之前画的，以便区分。平移是叠加。

    //开始路径

    context.beginPath();

    //画员外圆

    context.arc(100,100,99,0,2*Math.PI,false); //圆心位置实际上是200+100

    //绘制内圆

    context.moveTo(194,100); //画笔起点平移x 方向6单位

    context.arc(100,100,94,0,2*Math.PI,false); //圆心不变，画同心圆，半径缩小6和画笔位置重合。

    //变换原点

    context.translate(100,100); //圆心位置变成200+100+100 =400

    //旋转表针

    context.rotate(1);  //旋转变换90度，后面画的按正常坐标画完后旋转90

    //绘制分针

    context.moveTo(0,0); //此处lineTo(0,0) 实际上是去到绝对原点的300，300

    context.lineTo(0,-85);

    //绘制时针

    context.moveTo(0,0);

    context.lineTo(-65,0);

    //描边路径

    context.stroke();

    //context.restore(); 再保存设置的结果中向前以及返回

}

//15.2.6 绘制图像

var image = document.images[0];

//context.drawImage(image,10,10); //画一个图画到哪个位置  实际位置是310，310 并且再旋转90 因为上面旋转了90

context.drawImage(image,10,10,50,50); //指定w h

//context.drawImage() 最多9个参数 要绘制的源图像，源图像x坐标，源图像y坐标,源图像宽度，源图像高度，目标图像x 目标图像y,目标图像宽度，目标图像高度

//15.2.7 阴影

var drawing2 = document.getElementById('drawing2');

var context2 = drawing2.getContext('2d');

//设置阴影

context2.shadowOffsetX =5;

context2.shadowOffsetY =5;

context2.shadowBlur =4;

context2.shadowColor ='rgba(0,0,0,0.5)';

//绘制红色矩形

context2.fillStyle ='#ff0000';

context2.fillRect(10,10,50,50);

//绘制蓝色矩形

context2.fillStyle ='rgba(0,0,255,1)';

context2.fillRect(30,30,50,50);

//15.2.8 渐变

var gradient1 = context2.createLinearGradient(50,50,70,70);

gradient1.addColorStop(0,'white');

gradient1.addColorStop(1,'black');

var gradient2 = context2.createRadialGradient(125,125,10,125,125,30); //同心圆向外渐变

gradient2.addColorStop(0,'white');

gradient2.addColorStop(1,'black');

//绘制渐变矩形

context2.fillStyle =gradient1;

context2.fillRect(50,50,50,50);

context2.fillStyle =gradient2;

context2.fillRect(100,100,50,50);

//context2.stroke();

//15.2.9 模式

var image =document.images[0];

// image.width=50;

// image.height =50;

var pattern = context2.createPattern(image,'repeat'); //repeat repeat-x repeat-y no-repeat

context2.fillStyle =pattern;

context2.fillRect(200,200,150,150);

//15.2.10 使用图像数据

var imageData = context2.getImageData(100,100,50,50); //取得坐标位置宽度和长度的区域的数据

var data = imageData.data;

var red =data[0],green=data[1],blue=data[2],alpha=data[3];

data[0] =255;//设置图像数据

imageData.data =data;

context2.putImageData(imageData,0,0);//写图像数据到位置

//15.2.11 合成

context2.globaAlpha =0.5;

javascript权威指南第15章使用Canvas绘图的更多相关文章

javascript权威指南第11章 DOM扩展
//javascript 权威指南第三版第11章 DOM扩展 //取得body元素 var body = document.querySelector("body"); //取 ...
【笔记】javascript权威指南-第六章-对象
对象 //本书是指:javascript权威指南 //以下内容摘记时间为:2013.7.28 对象的定义: 1.对象是一种复合值:将很多值(原始值或者对象)聚合在一起,可以通过名字访问这些值. ...
【笔记】javascript权威指南-第三章-类型，值和变量
javascript中的原始类型和对象类型(基本类型和引用类型) //本书是指:javascript权威指南 //以下内容摘记时间为:2013.7.27 计算机程序运行时需要对值(value ...
javascript权威指南第16章 HTML5脚本编程
<!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...
javascript权威指南第13章事件示例代码
html 部分 <!DOCTYPE html> <html> <head> <title>Event Bubling Example</title ...
javascript权威指南笔记[1-5]
1.javaScript的数据类型分为两类:原始类型和对象类型: 2.javaScript中除了数字,字符串,布尔值,null,undefined之外就是对象了: 3.对象(object)是属性(pr ...
JavaScript权威指南--第3章类型、值和变量
在编程语言中,能够表示并操作的值(value)的类型称作数据类型(type).使用变量来储存值.JavaScript中数据类型有两种:原始类型(primitive type/基本数据类型)和对象类型( ...
JavaScript权威指南第02章词法结构
词法结构 2.1字符集 JavaScript 是Unicode字符集编写,差点儿支持地球上全部的语言. 2.1.1区分大写和小写 javascript是区分大写和小写的语言. 2.1.2 空格.换行符 ...
JavaScript权威指南第01章 JavaScript 概述
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangbin10025/article/details/27951767 JavaScript 概 ...

随机推荐

Python习题001
作业1 * 用条件语句写一个BMI(体重除以身高的平方)指数* 低于18.5:过轻* 18.5 - 25 正常* 25 - 28 过重* 28 - 32 肥胖* 高于32 严重肥胖 weight = ...
封装函数（累计和、K型、金字塔）
// 假设有个函数,只要传参数进去,就能统计累加的结果 function test($n){ if($n==1){ return 1; } return $n+test($n-1);}echo tes ...
git创建本地分支，推送到远程
创建本地分支git branch 分支名例如:git branch dev,这条命令是基于当前分支创建的本地分支,假设当前分支是master(远程分支),则是基于master分支创建的本地分支dev ...
csredis
源码地址:https://github.com/2881099/csredis 1.增加了 CSRedisClient 现实集群与连接池管理,和 RedisHelper 静态类快速上手 //普通模式 ...
MyBatis 常用词汇含义
JDBC:java Data Base Connection(Java与数据库连接): ORM:Object Relational Mapping(对象关系映射,简称ORM,或者O/RM,或者O/M ...
galera集群
一.环境准备 1.各主机配置静态域名解析: cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhos ...
【转载】 C#中日期类型DateTime的日期加减操作
在C#开发过程中,DateTime数据类型用于表示日期类型,可以通过DateTime.Now获取当前服务器时间,同时日期也可以像数字一样进行加减操作,如AddDay方法可以对日期进行加减几天的操作,A ...
ABAP-JCO服务端连接问题
公司网络服务加域,若SAP服务器后端未配置端口号映射,则外部服务器注册JCO服务监听需要调整 # server jco.server.connection_count=5 jco.server.gwh ...
Python——hashlib（加密模块）
主要用于对字符串的加密,最常用的为MD5加密: import hashlib def get_md5(data): obj = hashlib.md5() obj.update(data.encode ...
Linux ls命令参数详解 <转>
下面是一个与 ls 一起使用的一些常用选项的简短列表.请记住,你可以通过阅读 ls 的说明书页(man ls)来获得选项的完整列表. -a – 全部(all).列举目录中的全部文件,包括隐藏文件(.f ...

javascript权威指南第15章 使用Canvas绘图

javascript权威指南第15章 使用Canvas绘图的更多相关文章

随机推荐

热门专题

javascript权威指南第15章使用Canvas绘图

javascript权威指南第15章使用Canvas绘图的更多相关文章