文档章节

HTML5之帆布(canvas)(三)

博为峰教研组
 博为峰教研组
发布于 2016/12/12 14:50
字数 467
阅读 6
收藏 0

实例演示

现在,我们开始通过一个实例来学习使用画布绘制矩形,圆,文本,图片等功能先看看效果:

建立HTML,并增加表格表单

先新建一个HTML的页面,并增加表格表单控件

<!DOCTYPE HTML>

<html>

<head>

    <title>TweetShirt</title>

    <meta charset="utf-8">

    <style>

        canvas{

            border: 1px solid black;

        }

    </style>

 

    <script src = "tweetshirt.js">

    </script>

</head>

 

<body>

    <h1>TweetShirt</h1>

    <canvas id="tshirtCanvas" width="600" height="200">Please upgrade your browser to use TweetShirt!</canvas>

 

    <form>

        <p>

            <label for="backgroudColor">选择背景颜色: </label>

            <select id = "backgroundColor">

                <option value="white" selected="selected">白色</option>

                <option value="black">黑色</option>

            </select>

        </p>

 

        <p>

            <label for="shape">选择图形: </label>

            <select id = "shape">

                <option value="none" selected="selected">无</option>

                <option value="circles">圆形</option>

                <option value="squares">正方形</option>

            </select>

        </p>

 

        <p>

            <label for="foregroundColor">选择前景颜色: </label>

            <select id = "foregroundColor">

                <option value="black" selected="selected">黑色</option>

                <option value="white">白色</option>

            </select>

        </p>

 

        <p>

            <input type="button" id="previewButton" value="预览">

        </p>

 

    </form>

</body>

</html>

JavaScript的处理表单控件

新建一个JavaScript的文件tweetshirt.js,首先启动预览按钮,这样点击这个按钮时它就会调用一个JavaScript的函数来处理画布绘制

window.onload = function () {

    var button = document.getElementById("previewButton");

    button.onclick = previewHandler;

}

 

<!--预览点击事件-->

function previewHandler() {

    var canvas = document.getElementById("tshirtCanvas");

    var context = canvas.getContext("2d");

 

    //绘制图像之前,重置之前绘制的内容

    fillBackgroudColor(canvas,context);

 

    //查看界面选择了哪种颜色

    var selectObj = document.getElementById("shape");

    var index = selectObj.selectedIndex; //得到表单控件选项的编号的数组

    var shape = selectObj[index].value; //得到选项的值

 

    if (shape == "squares") {

        for(var squares = 0 ; squares < 20; squares++) {

            //绘制正方形

            drawSquare(canvas,context);

        }

    }

 

    if (shape == "circles") {

        for(var circles = 0 ; circles < 20; circles++) {

            //绘制圆

            drawCircle(canvas,context);

        }

    }

    //绘制文本

    drawText(canvas,context);

    //绘制图片

    drawImage(canvas,context);

}

 

function fillBackgroudColor(canvas,context) {

    var selectObj = document.getElementById("backgroundColor");

    var index = selectObj.selectedIndex;

    var bgColor = selectObj[index].value;

 

    //fillStyle保存画布上完成绘制时所用的颜色,它是一个属性而不是方法,所以需要设置而不是调用

    context.fillStyle = bgColor;

    context.fillRect(0,0,600,200);

}

 

© 著作权归作者所有

博为峰教研组
粉丝 52
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
加载中

评论(0)

再来 10 个新鲜的 HTML5 教程

HTML5 火吗?看看 oschina 三天两头的 xx 个 xxx 就知道了。本文为你推荐最新的 10 个 HTML5 相关的教程,或许能启发你项目中的思路。 1. HTML5 canvas – Creating own Paint program Canva...

红薯
2011/11/15
3.9K
4
30 个必须看的 HTML 5 教程

HTML5 和 CSS3 拓展了Web 设计的可能性。有很多大量的设计师和开发者在web设计中开始学习并使用HTML 5。 这次我们推荐的30个有用的HTML 5 教程,相信会帮助开发者提升技能。列表如下: Maki...

小卒过河
2011/07/29
1.6W
7
10 在线工具用来简化 HTML5 编码

HTML5 肯定是会彻底改变我们创建的网站和Web应用程序。在这篇文章中,编制了10个非常强大的工具,以简化和增强你的HTML5的编码。 Initializr Initializr会为你生成一个干净的可定制的模板,基...

红薯
2011/08/16
3.2K
3
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
696
1
好程序员HTML5大前端常用开发工具大集合

HTML5作为当前最为流行的编程语言,广为适用。语言的使用人数急剧增长,更多地开发人员使用这种语言来创建各种内容并放到互联网上。随着每一个新版本的发布,HTML通过更好的功能和技术渐渐占...

好程序员IT
2019/06/12
68
0

没有更多内容

加载失败,请刷新页面

加载更多

免费的https证书能不能用?

在https加密协议备受推崇的时代,站长们都纷纷在为自己的网站部署https证书,没有部署的也差不多都在计划中。而市面上的https证书有免费和付费之分,难免有些用户会为了节约成本而去选择免费...

安信证书
32分钟前
45
0
RN 热更新Node服务cpu占用从80% 优化到20% 记录

RN 热更新Node服务cpu占用从80% 优化到20% 记录 先看优化前后结果对比 优化前 优化后 先聊下背景,过年前半路接手团队的 RN的热更新的服务端开发,服务端采用的是 Express + Mysql,是拿 gith...

hucheng9110
37分钟前
57
0
看懂了责任链模式,你就能明白很多

前言 只有光头才能变强。 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 最近在看项目代码的时候发现「责任链模式」,于是想花点时间来写写什么是责任链...

Java3y
42分钟前
107
0
Github上的奇葩项目,玩100遍都不够

这段时间大家在家自我隔离、居家办公憋坏了吧。为了打发这种无聊的生活,我决定拿出我在github上珍藏多年的沙雕项目,让大家在无聊的时候可以打发时间。 Github作为互联网上最大的开源社区,...

java之旅
45分钟前
81
0
(旺财记账项目)Vue 全局数据管理(下)之Vuex

1. Vuex 就是一个数据读写工具 2. 引用了之后就可以读 3. 大概使用方法 const store = new Vuex.Store({ state: { // data,也就是数据 count: 0 }, mutations: { increment(s...

ories
46分钟前
61
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部