HTML5 Canvas 学习日志（十）

最新推荐文章于 2025-09-10 17:59:49 发布

转载最新推荐文章于 2025-09-10 17:59:49 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yuewawa/blog/609911

文章标签：

#python

本文介绍如何使用HTML5的Canvas API绘制全屏的红色图像，并提供了具体的JavaScript代码实现。通过对CanvasPixelArray的理解和应用，实现了像素级别的图像绘制。

2019独角兽企业重金招聘Python工程师标准>>>

HTML5 Canvas 学习日志（十）
绘制图像

$(document).ready(function(){var canvas = $("#mycanvas");var context = canvas.get(0).getContext("2d");var imageData = context.createImageData(500, 500);var pixels = imageData.data;var numOfPixel = imageData.width*imageData.height;for (var i=0; i<numOfPixel; i++){/* 绘制红色图片 */pixels[i*4] = 255; //redpixels[i*4+1] = 0; //greenpixels[i*4+2] = 0; //bluepixels[i*4+3] = 255; //alpha /* 绘制随机颜色图片 */        // pixels[i*4] = Math.floor(Math.random()*255); //red// pixels[i*4+1] = Math.floor(Math.random()*255); //green// pixels[i*4+2] = Math.floor(Math.random()*255); //blue// pixels[i*4+3] = 255; //alpha }//将imageData放入canvascontext.putImageData(imageData, 0, 0);
});