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 概 ...

随机推荐

《The Google File System》笔记
<The Google File System> 笔记一.Introduction 错误是不可避免的,应当看做正常的部分而不是异常.因此需要设计持续监控,错误检查,容错,自动恢复的系统. ...
基于UDP的编程
前提:基于Linux系统的学习服务器端编程模型1 socket(2) 创建通讯端点,返回一个文件描述符fd2 bind(2) 将fd绑定到本地的地址和端口while(1){ 阻塞等待客户端请求数据的 ...
《Java Web开发实战》——Java工程师必备干货教材
一年一度毕业季,又到了简历.offer漫天飞,失望与希望并存的时节.在IT行业,高校毕业生求职时,面临的第一道门槛就是技能与经验的考验,但学校往往更注重学生的理论知识,忽略了对学生实践能力的培养,因而 ...
Scala 面向对象编程之Trait
将trait作为接口使用 // Scala中的Triat是一种特殊的概念 // 首先我们可以将Trait作为接口来使用,此时的Triat就与Java中的接口非常类似 // 在triat中可以定义抽象方 ...
Android--Fragment嵌套的问题
项目中遇到Fragment嵌套应用的问题子Fragment中要用getChildFragmentManager()方法获取FragmentManager,否则会出问题!
在论坛中出现的比较难的sql问题：11(字符分拆多关键字匹配问题)
原文:在论坛中出现的比较难的sql问题:11(字符分拆多关键字匹配问题) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉 ...
【转载】 Asp.Net安全之防止脚本入
在ASP.NET开发过程中,安全性是必须要重中之重需要考虑的,其中一种情况是要防止用户输入恶意脚本入侵的情况,恶意脚本入侵指的是用户在提交内容中提交了包含特殊Javascript脚本程序等非法信息,如 ...
对于Element-ui分页进行再次的封装使用
这是我项目的分页的目录结构,话不多说,直接上代码. <template> <div class="pagination-container"> <el ...
ECMAScript5面向对象技术(1)--原始类型和引用类型
概述大多数开发者在使用Java或C#等基于类的语言的过程中学会了面向对象编程.由于JavaScript没有对类的正式支持,这些开发者在学习JavaScript时往往会迷失方向: JavaScript ...
K2 BPM_【解决方案】K2+SAP：端到端无缝集成，为企业全面赋能提速_十年专注业务流程管理系统
企业数字化转型离不开信息技术的支撑,大部分企业的各项业务都会有专业的系统,比如ERP.BI.CRM等.但这些系统往往由于无法融合,造成信息孤岛.数据断层等问题,这阻碍了企业推动数字化转型的进程.如何实 ...

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

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

随机推荐

热门专题

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

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