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爬虫-爬取你想要的小姐姐
一.准备 1. 原地址 2. 检查html发现,网页是有规则的分页, 最大图片的class为pic-large 二.代码 import requests import os from bs4 impo ...
springMVC设置不拦截静态资源的方法
SpringMVC提供<mvc:resources>来设置静态资源,但是增加该设置如果采用通配符的方式增加拦截器的话仍然会被拦截器拦截,可采用如下方案进行解决: 方案一.拦截器中增加针对静 ...
Word 文档内超级链接跳转到书签
1. 前言在Word文档内如何实现一些跳转的超链接呢?Word中,一些外部链接,我们通常叫作超链接,内部链接我们可以叫书签.如何在文档中如何使用书签,跳转到指定位置? 这里我在网上随便找了一份模拟试 ...
机器学习-EM算法-pLSA模型笔记
pLSA模型--基于概率统计的pLSA模型(probabilistic Latent Semantic Analysis,概率隐语义分析),增加了主题模型,形成简单的贝叶斯网络,可以使用EM算法学习模 ...
PB数据窗口分页
第一步:增加一个计算列,此计算列必须放在Detail段,Expression中输入: ceiling(getrow()/500) --这里500还可以用全局函数取代,这样可以允许用户任意设置每页多少 ...
service mc_start.sh does not support chkconfig
在构建docker镜像时,编写Dockerfile构建镜像时,配置自启动脚本报错,service mc_start.sh does not support chkconfig 添加下面两句到 #!/b ...
jquery.fileupload源码解读笔记
基础编程风格新建 test.html 和 test.js和 main.js和无论哪种顺序 <body> <script src="/Sandeep/js/jquery ...
高德地图模糊搜索地址（elementUI）
首先引入AMap: 1.在index.html引入AMap <script type="text/javascript" src="http://webapi.am ...
Java 之文件过滤器
在学习过滤器之前,先来做一个案例. 题目:文件搜索,搜索 D:\java 目录中 .java 文件. 分析: 1. 目录搜索,无法判断多少级目录,使用递归,遍历所有目录 2. 遍历目录时,获取的子 ...
vscode教程（基础篇）
转载:https://segmentfault.com/a/1190000017949680 本文主要介绍vscode在工作中常用的快捷键及插件,目标在于提高工作效率本文的快捷键是基于mac的,wi ...

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

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

随机推荐

热门专题

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

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