[英]Drawing a single pixel w/canvas
是否可以說,一個放大的畫布,其中每個5x5塊實際上是最終圖像中的1個像素,以及如何使用存儲在變量onclick中的顏色“繪制”像素? 我測試過的任何代碼最終都是筆畫,點擊不會因某些原因。
像這樣的東西?
<canvas id="canvas" style="width:100px; height:100px" width="5" height="5"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//Background
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
canvas.addEventListener("click", function(e) {
var x = Math.floor(e.x * canvas.width / parseInt(canvas.style.width));
var y = Math.floor(e.y * canvas.height / parseInt(canvas.style.height));
//Zoomed in red 'square'
context.fillStyle = "#F00";
context.fillRect(x, y, 1, 1);
}, true);
</script>
編輯:添加了點擊功能
演示: http : //jsfiddle.net/Cmpde/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.