HTML5绘图初试水

代码:

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>标题</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="200px" height="200px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
    function draw(){
        var canvas=document.getElementById("myCanvus");
        var cxt=canvas.getContext("2d");
        cxt.fillStyle="#FFee00";
        cxt.beginPath();
        cxt.arc(100,100,65,0,Math.PI*1,true);

        cxt.moveTo(100,100);
        cxt.lineTo(195,100);

        cxt.moveTo(100,100);
        cxt.lineTo(100,5);

        cxt.moveTo(100,100);
        cxt.lineTo(5,100);

        cxt.moveTo(100,100);
        cxt.lineTo(165,35);

        cxt.moveTo(100,100);
        cxt.lineTo(35,35);
        cxt.stroke();

        cxt.closePath();
        cxt.fill();
    }
//-->
</script>
时间: 2024-10-07 08:01:36

HTML5绘图初试水的相关文章

HTML5绘图之文字旋转

HTML5绘图之文字旋转 在GDI/GDI+中文字旋转是一件比较容易的事情,HTML5的Canvas中的旋转与GDI/GDI+中的旋转稍微有点差异,先看一个图: 文字旋转的示例代码 ctx.beginPath(); ctx.fillStyle = "#000000"; ctx.font = "52pt Calibri"; ctx.textAlign = "center"; ctx.fillText(this.end, endX, endY); c

如何使用 HTML5 Canvas 制作水波纹效果

原文:如何使用 HTML5 Canvas 制作水波纹效果 今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javascript 就可以创建一个很有趣的解决功能. 在线演示      源码下载 Step 1. HTML 和以前一样,首先是 HTML 代码: <!DOCTYPE html> <html> <head> <meta

web前端入门之HTML5绘图

麦子刚刚又有一门新课程上线了!爱学习的你,还不强势围观? ------ 新课讲什么? HTML5提供了Canvas元素,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过一套完整的绘图 功能类似于其他通用二维的API,从而生成动态的图形. #小麦说#本课程详细讲解了HTML5绘图的基本方法,包括文字.路径.图像和渐变等内容,最后以一个单机版的五子棋项目来证明HTML5绘图功能的强大. ------ 新课在哪

C++笔记2 :“反射”初试水

像Java或者是很多脚本语言,由于有着 "不用编译成机器码,直接解释执行" 这种先天优势,实现反射机制简单的一B.. 再反观我大C++,又一次遇到了麻烦... 其实我的需求特别简单:就是利用字符串可以调用同名的函数而已... 说的清楚一点,就是传入参数 "hello",可以调用 void hello() 这个函数... C++编译后已经丢掉了函数名,不可能做到这个需求,而很多时候这个需求都是必须的,然后我就得到了下面两种大概可行的做法: 1.写个map,key为字符

10款最佳HTML5绘图工具

HTML5无疑是当前最受宠的一项技术,每个web设计者都在热烈的讨论这种神奇的标记语言的兴起.HTML5是一种学起来毫不费力的标记语言,但它却能提供迷人的.富有艺术性的特征,帮助web设计人员完成他们的构思想象.HTML5对于一个设计人员来说能毫不费力的理解,轻松的掌握. 草绘和制图是设计工作者工作中一个重要的特征.HTML5将会这方面显露出不可限量的前途. 今天,我给web设计人员收集了几款最好的HTML5绘图或涂鸦工具.这些绘图工具大多数是用HTML5画布(Canvas)实现的,部分辅以Ja

Android初试水

唯技术与能力让人心安 初试水,愿定期的更新博客,将Android开发中遇到的问题整理出来,以资激励自己前进的步伐.若有技术阐述之误,烦请众将海涵初登堂之菜鸟 ----承序猿

使用html5绘图技术事项调用摄像头拍照;

在mui框架中调用手机摄像头进行拍照可以直接使用原声的HTML5: 以下是HTML代码 <video id="video" width="640" height="480" autoplay></video> <!--这一行是调用摄像头之后呈现的画面--> <button id="snap">Snap Photo</button> <!--拍照按钮-->

HTML5系列:HTML5绘图

1. canvas元素基础 canvas元素是HTML5中新增的一个重要元素,专门用来绘制图形. 在页面中使用canvas元素绘制图形需要经过的三个步骤: 步骤一  使用canvas元素创建一个画布区域,并获取该元素. 步骤二  通过获取的canvas元素,取得该图形元素的上下文环境对象. 步骤三  根据取得的上下文环境对象,在页面中绘制图形或动画. 1.1 页面添加canvas元素 <canvas id="cnvMain" width="500" heigh

HTML5绘图总结详解

HTML5的绘图基础 ? 在HTML5以前的时代,web前端开发者无法在HTML页面上动态地绘制图片? HTM5新增了一个<canvas../>元素,相当于一个画布,可以获得一个CanvasRenderingContext2D对象? CanvasRenderingContext2D提供了很多画图API HTML5的画图主要是通过CanvasRenderingContext2D这个对象的API来完成的,画图的所有方法都被封装到它里边.在学习内容中,我们都是简称这个对象为:cxt. 在Canvas