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 把微信小程序的二维码转化成图片
官方文档 import cString import requests from tornado.web import authenticated, RequestHandler URL = 'htt ...
java当中JDBC当中请给出一个sql server的stored procedure例子
3.sql server的stored procedure例子: import java.sql.*;public class StoredProc0 {public static void main ...
k8s 证书反解
k8s证书反解 1.将k8s配置文件(kubelet.kubeconfig)中client-certificate-data:内容拷贝 2.echo "client-certificate- ...
Android Manifest 中 uses-feature 和 uses-permission的作用关系和区别
Manifest中的 <uses-permission android:name="android.permission.CAMERA" /> 和 <uses-f ...
C++ 数组和vector的基本操作
1.静态数组的基本操作 int a[5] = {0, 3, 4, 6, 2}; 1.1 数组的遍历 1.1.1 传统的for循环遍历 int size = sizeof(a) / sizeof(*a) ...
ALV报表——选择屏幕变量赋值
ABAP选择屏幕变量赋值运行效果: 代码: *&---------------------------------------------------------------------* ...
PB数据窗口分页
第一步:增加一个计算列,此计算列必须放在Detail段,Expression中输入: ceiling(getrow()/500) --这里500还可以用全局函数取代,这样可以允许用户任意设置每页多少 ...
谷歌chrome浏览器提示“喔唷崩溃啦”的解决方案
原因分析:有可能是注册列表被一些卫士类优化工具或杀毒软件优化了. 解决方案:1. 卸载谷歌浏览器. ①开始→控制面板→添加或删除程序→找到谷歌浏览器卸载(卸载时勾选删除数据) ② 进入注册列表删除谷歌 ...
[UOJ#404][CTSC2018]组合数问题(79分,提交答案题,模拟退火+匈牙利+DP)
1.4.5.6.10都是op=1的点,除4外直接通过模拟退火调参可以全部通过. #include<cmath> #include<ctime> #include<cstd ...
WPF GridView动态添加项并读取数据
假设数据库有如下表, 首先我们创建一个WPF工程,界面如下 <Window x:Class="WpfApplication2.MainWindow" xmlns=" ...

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

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

随机推荐

热门专题

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

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