HTML5-Canvas对图片的操作-页面刷新后,自动滚动到原先...-Highcharts翻译系列十二：gauge测量图

当前位置: 编程技术>WEB前端

本页文章导读:

▪HTML5-Canvas对图片的操作 Canvas图片API非常强大，有两个最基础的方法，一是展示图片，二是像素级的修改图片后再把它打印到画布上。 1、通过drawImage()将图片显示在画布上 var img = new .........

▪页面刷新后,自动滚动到原先位置在ASP.NET页面中，每次页面回传，页面都会回到页面顶端，有时候，这是个麻烦，那么怎么避免这种情况呢。我总结了三种方式 1.页面里有MaintainScrollPositionOnPostback，默认是false，设为true即.........

▪Highcharts翻译系列十二：gauge测量图 Highcharts翻译系列十二：gauge测量图说明测量图需要highcharts-more.js的支持属性参数描述默认值 animation 动画 true color 主要颜色或序列颜色 null cursor 光标 null data.........

[1]HTML5-Canvas对图片的操作

来源: 发布时间: 2013-11-06

Canvas图片API非常强大，有两个最基础的方法，一是展示图片，二是像素级的修改图片后再把它打印到画布上。

1、通过drawImage()将图片显示在画布上

var img = new Image();

img.src = '';

img.onload = function(){

ctx.drawImage(img,0,0)

}

2、截取图片的一部分到画布上

//(sx , sy )开始位置

//(sw , sh )目标大小（缩放）

//(dx , dy )截取开始位置

//(dw , dh )截取大小

function drawImage(Image , sx , sy , sw , sh , dx , dy , dw , dh){

//code...

}

3、旋转图片

/*
                    1、将当前的画布背景保存起来，context.save()
                    2、重置变换矩阵,context.setTransform(1,0,0,1,0,0);
                    3、编码转换角度的算法,angle = 90 * Math.PI / 180;使用PI单位
                    context.translate(x,y),因为旋转的整个画布对象
                    4、context.drawImage

               */
               function rotate() {
                    ctx.save();
                    ctx.setTransform(1,0,0,1,0,0);
                    ctx.translate(0,0)
                    var angle = 90 * Math.PI / 180;
                    ctx.rotate(angle);
                    ctx.drawImage(img1,10,30);
                    ctx.restore();
               }

4、缩放和平移一张图片

强大drawImage()方法可以完成一切需求

demo：

http://beyeah.sinaapp.com/canvas/zoom-pan.html

5、像素处理

imagedata = context.createImageData(sw, sh)

// 创建一个100x100的区域来存储像素信息

imagedata = context.createImageData(imagedata)

// like copy

imagedata = context.createImageData()

// 创建一个空的图像实例

ImageData 对象带有三个属性

imagedata.width,

imagedata.height,

imagedata.data:存储着图片像素数据的数组,每四个数分别代表一个像素点的R，G，B，alpha透明度值

获取图像数据：

imagedata = context.getImageData(sx,sy,sw,sh);

四个参数定义位置和大小的矩形并从画布上复制到imagedata实例中

将图像数据打印到画布上：

context.putImageData(imagedata,dx,dy)

context.putImageData(imagedata,dx,dy [,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

修改像素信息：

/*
          * 对像素的透明属性进行修改时，值范围是0~255(许多地方此值的范围是0-1)
          *
          */
          for(var j=3;j<imageData.data.length;j+=4){
               imageData.data[j] = 128;
          }

---

出于安全考虑，只能操作来自同域下的图片资源。而在本地测试时，大部分浏览器会认为来自本地的图片是来自另外一个域。

所以测试时，需要搭建一个web服务器

6、将一个canvas对象复制至另一个canvas对象中

thecanvas = d.getElementById('canvas')

context.drawImage(thecanvas,0,0);

本文链接

[2]页面刷新后,自动滚动到原先位置

来源: 互联网发布时间: 2013-11-06

在ASP.NET页面中，每次页面回传，页面都会回到页面顶端，有时候，这是个麻烦，那么怎么避免这种情况呢。我总结了三种方式

1.页面里有MaintainScrollPositionOnPostback，默认是false，设为true即可

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"  MaintainScrollPositionOnPostback="true"
    Inherits="Default.Default" %>

2.可以使用Jquery，通过获取当前位置的高度，具体实现如下

function position()
{
     var top=$("#元素id").offset().top();
     $("html,body").animate({scrollTop:top},1000);
}

3.可以使用锚点，但这里可使用灵活处理

首先获取需要滚动到的位置的id，如，可以设置一个元素（<span name="postion" id="postion"></span>，注：要在form里），另外在form的任意位置设置<a href=/blog_article/"/index.html id="click"></a>注：a标签里不要有内容，在回传的地方调用

Page.ClientScript.RegisterStartupScript(this.GetType(), "scroll", "document.getElementById('position').click();", true);

这种方法其实就是触发某个元素的事件

作者：edison0621 发表于2013-3-12 16:49:50 原文链接

阅读：78 评论：0 查看评论

[3]Highcharts翻译系列十二：gauge测量图

来源: 互联网发布时间: 2013-11-06

Highcharts翻译系列十二：gauge测量图

说明

测量图需要highcharts-more.js的支持

属性

参数

描述

默认值

animation

动画

true

color

主要颜色或序列颜色

null

cursor

光标

null

dataLabels

同bar，参见二级标题datalabels

dial

刻度盘，参见dial

enableMouseTracking

启用或禁用鼠标跟踪一个特定的序列

true

events

事件，参见二级标题events

序列的id

null

pivot

支点，参见pivot

point

同area，参见point

selected

在序列初始化时是否选中

false

showCheckbox

如果是true，将会在图例项中出现复选框允许选择序列

false

showInLegend

是否显示部分序列或全部序列的类型在图例中

null

states

参见states

stickyTracking

鼠标事件的黏连追踪。为true时显示提示文本框，false不显示。

true

tooltip

一个可配置对象，对于可选渲染的各个序列的提示的配置对象。属性继承自tooltip

{}

visible

设置序列初始化的可见性

true

zIndex

定义序列的Z指数

null

dial拨号盘选项

参数

描述

默认值

backgroundColor

测量图刻度盘的背景色或填充色

black

baseLength

刻度盘基座的长度，相对于整个刻度盘的半径或长度

70%

baseWidth