Canvas学习笔记及像素操作—

绘制文本

    window.onload = function () {//获取画布var canvas = document.querySelector('#test')//检查支持性if (canvas.getContext) {//获取画笔var ctx = canvas.getContext("2d")//文本水平垂直居中ctx.font = "60px impact"ctx.textBaseline = 'middle'var w = ctx.measureText('绘制文本').widthctx.fillText('绘制文本', (canvas.width - w) / 2, (canvas.height - 60) / 2)}}

渐变

    window.onload = function () {//获取画布var canvas = document.querySelector('#test')//检查支持性if (canvas.getContext) {//获取画笔var ctx = canvas.getContext("2d")//线性渐变// var gradient = ctx.createLinearGradient(0, 0, 400, 400)//径向渐变var gradient = ctx.createRadialGradient(200, 200, 80, 200, 200, 160)gradient.addColorStop(0, "red")gradient.addColorStop(0.5, "yellow")gradient.addColorStop(1, "blue")ctx.fillStyle = gradientctx.fillRect(0, 0, 400, 400)}}

使用图片

window.onload = function() {//获取画布var canvas = document.querySelector('#test')//检查支持性if (canvas.getContext) {//获取画笔var ctx = canvas.getContext("2d")ctx.translate(70, 100)var img = new Image()img.src = "test.png"img.onload = function() {draw()}function draw() {// ctx.drawImage(img, 0, 0, img.width, img.height)//插入图片//设置背景var pattern = ctx.createPattern(img, "no-repeat")ctx.fillStyle = patternctx.fillRect(0, 0, img.width, img.height)}}}

像素操作（实现马赛克）

  window.onload = function () {//获取画布var canvas = document.querySelector('#test')//检查支持性if (canvas.getContext) {//获取画笔var ctx = canvas.getContext("2d")var img = new Image()img.src = "test.png"img.onload = function () {canvas.width = img.width * 2canvas.height = img.heightdraw()}function draw() {ctx.drawImage(img, 0, 0) //插入图片//得到oldImgdata像素数据var oldImgdata = ctx.getImageData(0, 0, img.width, img.height)//创建一个创建一个newImageData对象var newImgdata = ctx.createImageData(img.width, img.height)//选出一个马赛克矩形var size = 4for (var i = 0; i < oldImgdata.width / size; i++) {for (var j = 0; j < oldImgdata.height / size; j++) {//从马赛克矩形中随机抽出一个像素点的信息（rgb）var color = getPxInfo(oldImgdata, i * size + Math.floor(Math.random() * size), j * size +Math.floor(Math.random() * size))//将整个马赛克矩形中的像素点信息统一调成随机抽出的像素点信息for (var a = 0; a < size; a++) {for (var b = 0; b < size; b++) {setPxInfo(newImgdata, i * size + a, j * size + b, color)}}}}ctx.putImageData(newImgdata, img.width, 0);}//获取单个像素点的信息function getPxInfo(imgdata, x, y) {var color = []var data = imgdata.datavar w = imgdata.widthcolor[0] = data[(y * w + x) * 4]color[1] = data[(y * w + x) * 4 + 1]color[2] = data[(y * w + x) * 4 + 2]color[3] = data[(y * w + x) * 4 + 3]return color}//设置单个像素点的信息function setPxInfo(imgdata, x, y, color) {var data = imgdata.datavar w = imgdata.widthdata[(y * w + x) * 4] = color[0];data[(y * w + x) * 4 + 1] = color[1];data[(y * w + x) * 4 + 2] = color[2];data[(y * w + x) * 4 + 3] = color[3];}}}

合成与裁剪

全局透明度的设置：ctx.globalAlpha = value;
globalCompositeOperation
- source:新的图像（源）
- destination:已经绘制过的图形（目标）
- ctx.globalCompositeOperation = type;
  - type:
    1.source-over:源在上面/destination-over:目标在上面
    2.source-in:重叠中源的部分/destination-in:重叠中目标的部分
    3.source-out:源超过目标的部分/destination-out:目标超过源的部分
    4.source-atop:砍掉源溢出的部分/destination-atop:砍掉目标溢出的部分

Canvas学习笔记及像素操作——实现马赛克相关推荐

tensorflow学习笔记——使用TensorFlow操作MNIST数据（1）
续集请点击我:tensorflow学习笔记--使用TensorFlow操作MNIST数据(2) 本节开始学习使用tensorflow教程,当然从最简单的MNIST开始.这怎么说呢,就好比编程入门有He ...
canvas学习笔记
canvas学习笔记 canvas API中文网 - Canvas API中文文档首页地图使用canvas来绘制图形 - Web API 接口参考 | MDN 什么是Canvas? Canvas是H ...
OpenCV 学习笔记-day13 像素值统计统计计算最大最小值，平均值和标准差（minMaxLoc()和meanStdDev()函数的使用）
OpenCV 学习笔记 day13 像素值统计函数 minMaxLoc(); 最大值最小值统计 meanStdDev();平均值和标准方差统计代码 day13 像素值统计函数 minMaxLoc ...
Canvas 学习笔记1
#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人 ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
Canvas学习笔记之画线
Canvas学习笔记之画线步骤 1.使用getElementById()获取canvas元素. 2.获取canvas的绘制环境getContext(). 3.进行绘制画笔的粗细和颜色定义,分别是li ...
NetLogo学习笔记3 —— 集合操作与生命游戏
NetLogo学习笔记3 -- 集合操作与生命游戏 (这篇新知识点略多) 上一篇文章我们了解NetLogo模型的基本要素,学习了函数定义与ask语法.并编写了我们的第一个程序! 这一次,我们来编写一个 ...
canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）...
[下篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
opencv学习笔记之像素处理
文章目录前言一.多通道的分离合并多通道分离函数split() 多通道合并函数merge() 二.图像像素统计计算图像的平均值和标准差前言记录opencv有关像素操作的一些函数和功能一.多 ...

Canvas学习笔记及像素操作——实现马赛克

绘制文本

渐变

使用图片

像素操作（实现马赛克）

合成与裁剪

Canvas学习笔记及像素操作——实现马赛克相关推荐

最新文章

热门文章