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 之前端开发（CSS三大特性、字体属性、文本属性、背景属性）
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
第二章 Python基础语法
2.1 环境的安装解释器:py2 / py3 (环境变量) 开发工具:pycharm 2.2 编码编码基础 ascii ,英文.符号,8位为一个东西,2**8 unicode ,万国码,可以表示所 ...
【leecode】 Course Schedule
class Solution { public: static bool canFinish(int numCourses, vector<pair<int, int>>&am ...
递推问题 hdu 2046 与1143的比对
2046 在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格,输入n ,输出铺放方案的总数.例如n=3时,为2× 3方格,骨牌的铺放方案有三种,如下图: Input 输入数据由多行组成,每行 ...
DropDownList下拉控件
<asp:DropDownList ID="DropDownList1" runat="server" Width="177px" ...
为Visual Studio安装其他控件（cognex 康耐视）时报错：未能加载文件或程序集 EnvDTE, Version=8.0.0.0
解决办法: 在VS的路径下(一般为:C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Common7\IDE\Private ...
关键字：__thread & pthread_key_t
在说__thread之前,先来看看pthread_ket_t吧. 参考:http://blog.csdn.net/lmh12506/article/details/8452700 上面的博文说的比较通 ...
c++中配置多个环境的格式
例:环境1=$(QTDIR)\bin 环境2=$(PATH) 环境3=E:\软件\办公\Vimba_2.1\VimbaCPP\Bin\Win64 具体配置为 PATH=$(QTDIR)\bin%3b$ ...
写在NOIP2018前
不知不觉距离NOIP2018还有两天,两个月的停课生活即将结束此时心里总感觉装着许多话,想要将其倾诉却发现连哪怕一句也凝结不出只觉得这两月像是场荒诞的冒险,好像我想做的什么都做了,又感觉我其实一事 ...
Mac 下编译 Hadoop
Mac 下编译 Hadoop-2.9.2 系统环境系统: Mac OS_10.14.4 maven: Apache Maven 3.6.0 jdk: jdk_1.8.0_201 ProtocolBu ...

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

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

随机推荐

热门专题

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

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