不光繪制圖片，在高分屏下，繪制文字和線條都會出現模糊的現象，GitHub上有一個hidpi-canvas-polyfill可以很好的解決這個問題，但是沒有對圖片進行處理。如果你了解了原因，解決這個問題也很容易。\x0d\x0a首先，引入上方這個polyfill;\x0d\x0a然后，得到devicePixelRatio和backingStorePixelRatio的比例，可以使用下面的方法\x0d\x0a \x0d\x0avar getPixelRatio = function(context) {\x0d\x0a var backingStore = context.backingStorePixelRatio ||\x0d\x0a context.webkitBackingStorePixelRatio ||\x0d\x0a context.mozBackingStorePixelRatio ||\x0d\x0a context.msBackingStorePixelRatio ||\x0d\x0a context.oBackingStorePixelRatio ||\x0d\x0a context.backingStorePixelRatio || 1;\x0d\x0a return (window.devicePixelRatio || 1) / backingStore;\x0d\x0a};\x0d\x0a \x0d\x0a//調用\x0d\x0avar ratio = getPixelRatio(ctx);\x0d\x0a\x0d\x0a之后，在調用ctx.drawImage()的時候，給width和height乘以ratio，如下：\x0d\x0a\x0d\x0a1\x0d\x0a \x0d\x0actx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio);
目前創(chuàng)新互聯公司已為1000多家的企業(yè)提供了網站建設、域名、網絡空間、網站托管維護、企業(yè)網站設計、雨花臺網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
function onStart() {
var canvas = document.getElementByIdx_x_x_x_x_x_x("lesson01");
if(canvas.getContext)
{
var context = canvas.getContext("2d");
var pic = new Image();
pic.onload=function(){
context.drawImage(pic,0, 0);
}
pic.src = "";
}
}
下面寫一個例子關于利用canvas實現圖片變灰的code.
html
head
script
window.onload = function () {
var canvas = document.getElementByIdx_x_x_x("myCanvas");
var image = document.getElementByIdx_x_x_x("imageSource");
// 將圖片的高寬賦值給畫布
canvas.width = image.width;
canvas.height = image.height;
// 獲得二維渲染上下文
if (canvas.getContext) {//為了安全起見，先判斷瀏覽器是否支持canvas
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);//將得到的image圖像繪制在canvas對象中
var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);//返回ImageData對象
alert(canvasData.width.toString());
alert(canvasData.height.toString());
// 填充灰色【讀取像素值和實現灰度計算】
for (var x = 0; x canvasData.width; x++) {
for (var y = 0; y canvasData.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasData.width) * 4;
var r = canvasData.data[idx + 0];
var g = canvasData.data[idx + 1];
var b = canvasData.data[idx + 2];
// 灰度的計算
var gray = .299 * r + .587 * g + .114 * b;
// assign gray scale value
canvasData.data[idx + 0] = gray; // Red channel
canvasData.data[idx + 1] = gray; // Green channel
canvasData.data[idx + 2] = gray; // Blue channel
canvasData.data[idx + 3] = 255; // Alpha channel
// 新增黑色邊框
if (x 8 || y 8 || x (canvasData.width - 8) || y (canvasData.height - 8)) {
canvasData.data[idx + 0] = 0;
canvasData.data[idx + 1] = 0;
canvasData.data[idx + 2] = 0;
}
}
}
context.putImageData(canvasData, 0, 0); // 處理完成的數據重新載入到canvas二維對象中
} else {
alert("your browser does not support canvas!");
}
}
/script
/head
body
h2Hello World!/h2
img id="imageSource" src="1.jpg" alt="Canvas Source" /
canvas id="myCanvas" Gray Filter/canvas
/body
/html
HTML是用來做網站的一種語言哈，就是在html里面改變圖片的大小就要改變文件代碼，打開圖片源代碼，圖片文件的大小是height，和寬，我們可以更改，在語言中我們需要設置的都是英文的。
現在壓縮工具將圖片縮小之后都會對畫質有影響，壓縮圖片文件選擇壓縮工具頁面中的普通壓縮就可以了壓縮程度不要過大，找到圖片壓縮工具，圖片要放置在工具頁面上進行數據分析，根據圖片的大小工具會制定壓縮方案。
圖片分享論壇卻只允許發(fā)幾百KB的文件；微信、分享給朋友的時候自動壓縮的圖像都比較模糊
制作圖片的放大效果我考慮到的方法是將原始圖片繪制到canvas上，然后在對canvas進行局部裁剪最后對裁剪的部分進行放大，這樣就可以實現放大鏡的效果。
這里我給出一個實現這個想法的示例。該示例實際上就是運用HTML5?canvas中對畫布進行裁剪與保存畫布狀態(tài)的相關知識實現的。
上面是給出示例的效果圖。這是不是你想要的放大鏡效果呢？
下面我們來看下示例代碼：在這個示例中當你點擊圖片時圖片就會出現上圖效果，再一次點擊時就變成原始圖片了。
!DOCTYPE html
html
head
meta charset="utf-8"
title放大鏡/title
!—HTML代碼設計：一個簡單的canvas元素--
/head
body
div id="result-stub" class="well hidden"
canvas id="canvas" width="345" height="345"
p你的瀏覽器不支持canvas元素/p
/canvas
/div
script
window.onload=function() {
//獲取canvas對象以及圖片對象
var
canvas = document.getElementById('canvas'),
img = new Image(),
context = null,
dataUrl = null,
//設置一個標記，該標記的作用是控制我們點擊canvas時放大鏡效果的消失和出現
isMagnified = false,
//init函數只要是在圖片加載時繪制出圖形
init = function() {
img.onload = function() {
//繪制原始圖片
context.drawImage(img, 0, 0);
//將圖片信息轉化為二進制信息或者URL信息存儲在dataUrl中方便后面調用
dataUrl = canvas.toDataURL();
}
img.src = 'fist-pump-baby.jpg';
//設置標記值
isMagnified = false;
},
//magnify函數的作用是繪制具有放大鏡效果的圖形
magnify = function() {
//保存當前畫布的繪制狀態(tài)即畫布繪制原始圖片的狀態(tài)。方便我們在后面恢復到繪制原始圖片的狀態(tài)
context.save();
//因為放大鏡的圓圈和把手是通過canvas繪制的這里設置了一些繪制把手和圓圈的樣式屬性。
context.lineWidth = 10;//?線條寬度
context.shadowColor = '#000';//?陰影的顏色黑色
context.shadowBlur = 15;//?模糊級別為15
context.shadowOffsetX = 5;//?形狀與陰影的水平距離5
context.shadowOffsetY = 5;//?形狀與陰影的垂直距離5
//保存畫布當前狀態(tài)即我們設置陰影屬性后的狀態(tài)方便后面使用
context.save();
//繪制出放大鏡把手的圖形
context.beginPath();
context.moveTo(230, 230);
context.lineCap = 'round';
context.lineWidth = 30;
context.lineTo(285, 285);
context.stroke();
//對圖片進行裁剪，裁剪出的圖形是一個圓形。
context.beginPath();
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true);
context.clip();
//創(chuàng)建一個新的Image對象，這個Image對象的圖片資源是前面存儲在dataUrl中的圖片資源。所以這個Image對象和之前初始化的Image對象是完全一樣的。
var magnified = new Image();
magnified.src = dataUrl;
//對Image對象進行放大1.5倍，并進行繪制。注意此時的畫布狀態(tài)時裁剪為一個圓形的狀態(tài)，所以這里繪制的也僅僅是圖片中的一個圓形區(qū)域。這里為了繪制出圖片中娃娃的臉設置了繪制的圖片有一定的偏移量。
context.scale(1.5, 1.5);
context.drawImage(img, -40, -40);
//調用restore()函數將畫布狀態(tài)恢復到繪制把放大鏡把手時的狀態(tài)，即具有陰影屬性
context.restore();
//繪制放大鏡的圓圈，即繪制剛剛我們裁剪出來圖片的邊框。這樣剛剛裁剪出來的圓形圖形就會正好處于放大鏡的圓圈中。
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true);
context.stroke();
//重置畫布，將畫布恢復到繪制元素圖片的狀態(tài)，以方便繪制出放大效果后，再次點擊是繪制原始圖片。
context.restore()；
//設置標記值，實現點擊后放大效果消失。
isMagnified = true;
};
//加載初始化代碼，即當運行頁面時會在頁面繪制出一個原始圖像
init();
//監(jiān)聽畫布的點擊事件，當點擊頁面的圖像時會根據標記的值來進行判斷是否對畫布進行方大處理
$('canvas').click(function() {
if (isMagnified) {
init();//繪制原始圖像
}
else {
magnify();//繪制放大的圖像
}
});
}
/script
script src="jquery.js"/script
/body
/html
對于這些知識在一個叫秒秒學的教程網站上有相關的學習資料，有興趣的可以自己去看看，希望對你有幫助。
html5中是通過css3的background-size來控制自適應的。
直接在圖片代碼里面設置style，例如img src="xxx.jpg" style="max-width:100%;"/2、要么給圖片統(tǒng)一一個class名例如response-img，然后在css文件里面設置這個class
html5
萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改（這是一項推薦標準、外語原文：W3C Recommendation、見本處參考資料原文內容）
2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，該標準規(guī)范終于制定完成。
首先，您說的亮度應該是圖片透明度。
圖片透明度調整很簡單，只要在圖片的屬性中加上{filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}；
opacity是最重要的，因為它是CSS透明的標準屬性，取值范圍在0-1之間，目前支持的瀏覽器有：
Firefox、Chrome、Opera、Safari。（也就是說，除了IE，它支持所有主流瀏覽器）；
filter:alpha(opacity=50);是專門給IE設定的屬性，取值的范圍在0-100之間；
-moz-opacity是為了兼容一些老版本的Mozilla瀏覽器，取值范圍在0-1之間；
-khtml-opacity是為了兼容一些老版本的Safari瀏覽器，取值范圍在0-1之間。
重慶分公司
重慶分公司
