Html游戏开发-画图

简介: 1. 画矩形和写字 var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context.

1. 画矩形和写字

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

context.lineWidth = 30;

context.font = '24px Helvetica';
context.fillText('Click anywhere to erase', 175, 40);

context.strokeRect(75, 100, 200, 200);
context.fillRect(325, 100, 200, 200);

// 鼠标按下时清除整个画布
context.canvas.onmousedown = function (e) {
   context.clearRect(0, 0, canvas.width, canvas.height);
};


2. 射线渐变

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    gradient = context.createRadialGradient(
                 canvas.width/2, canvas.height, 10,
                 canvas.width/2, 0, 100);

gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow');

context.fillStyle = gradient;
context.rect(0, 0, canvas.width, canvas.height);
context.fill();

 

3. 居中文字

function drawText() {
context.fillStyle = 'blue';
context.strokeStyle = 'yellow';
context.fillText(text, canvas.width/2, canvas.height/2);
context.strokeText(text, canvas.width/2, canvas.height/2);
}
context.textAlign = 'center';
context.textBaseline = 'middle';

 

4. 图片

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
image = new Image();
image.src = 'fence.png';
image.onload = function(e) {
    context.drawImage(image, 0, 0);
};

 

5. 画布中的画布

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
scaleWidth = ..., // Calculate scales for width and height
scaleHeight = ...;
...
context.drawImage(canvas, 0, 0, scaleWidth, scaleHeight);

 

目录
相关文章
|
Web App开发 移动开发 HTML5
|
移动开发 JavaScript 前端开发
|
Web App开发 移动开发 前端开发
玩转html5<canvas>画图
玩转html5画图 导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移、旋转、缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺、裁剪、像素处理[不只图像、包括其他绘制图形]) 绘制文...
1111 0
|
移动开发 HTML5
HTML5简易在线画图工具
原文:HTML5简易在线画图工具 继上次学习了HTML5的路径画圆做了动态时钟、异次元空间的反转做了运动的太阳系,这两天将画线、画圆、填充等知识点结合起来做了一个简易的在线画图工具: 查看DEMO:HTML5简易在线画图工具 功能包括自由画笔、橡皮擦、文字填充、画三角形、画圆等,相对我这个新手来说,感觉挺难的,不过还是参考了资料慢慢“拼”出来了。
1472 0
|
2月前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
48 1
|
2月前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
31 0
|
2天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
15 1
[HTML、CSS]细节与使用经验
|
3天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
14 1
[HTML、CSS]知识点
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
10天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
54 6