canvas标签的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas test</title>

</head>

<body>

<!--矩形填充,fill指填充当前绘图（路径）-->

<canvas id="myCanvas1">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

    var canvas=document.getElementById('myCanvas1');

    var ctx=canvas.getContext('2d');

    ctx.fillStyle='#FF0000';

    ctx.shadowBlur=20;

    ctx.shadowColor="gray";

    ctx.fillRect(20,20,80,100);

</script>

<!--矩形描边,stroke指绘制已定义的路径-->

<canvas id="myCanvas0">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

    var canvas=document.getElementById('myCanvas0');

    var ctx=canvas.getContext('2d');

    ctx.strokeRect(20,20,80,100);

</script>

<!--圆-->

<canvas id="arc" width="200px" height="200px" style="border:1px solid gray"></canvas>

<script>

    var arc=document.getElementById("arc");

    ctx=arc.getContext("2d");

    ctx.strokeStyle="red";

    ctx.beginPath();

    ctx.arc(100,100,50,0,2*Math.PI);

    ctx.arc(100,100,70,0,2*Math.PI);

    ctx.stroke();

</script>

<!--绘制线条-->

<canvas id="line" width="200px" height="200px" style="border:1px solid gray"></canvas>

<script>

    var line=document.getElementById("line");

    ctx=line.getContext("2d");

    ctx.fillStyle="red";

    ctx.moveTo(0,0);

    ctx.lineTo(100,100);

    ctx.lineTo(200,0);

    ctx.lineTo(200,150);

    ctx.lineTo(0,150);

    ctx.lineTo(0,0);

    ctx.fill();

</script>

<!--文本-->

<canvas id="txt" width="200px" height="200px" style="border:1px solid red">您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

    var txt=document.getElementById("txt");

    var text=txt.getContext("2d");

    text.font="60px 微软雅黑";

    text.fillText("练习",40,110);

</script>

<!--文本空心-->

<canvas id="txt1" width="200px" height="200px" style="border:1px solid red">您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

    var txt=document.getElementById("txt1");

    var text=txt.getContext("2d");

    text.strokeStyle="red"

    text.font="60px 微软雅黑";

    text.strokeText("练习",40,110);

</script>

<!--渐变-->

<canvas id="gradient" width="200px" height="200px" style="border:1px solid red"></canvas>

<script>

    var c=document.getElementById("gradient");

    var text=c.getContext("2d");

    <!--线性渐变-->

    var gra=text.createLinearGradient(0,0,0,200);

    gra.addColorStop(0,'red');

    gra.addColorStop(1,'#000');

    text.fillStyle=gra;

    text.fillRect(0,0,200,200);

</script>

<canvas id="gradient2" width="200px" height="200px" style="border:1px solid red"></canvas>

<script>

    var c=document.getElementById("gradient2");

    var text=c.getContext("2d");

    <!--径向渐变-->

    var lin=text.createRadialGradient(100,100,30,100,100,100);

    lin.addColorStop(0,'#fff');

    lin.addColorStop(1,'#000');

    text.fillStyle=lin;

    text.fillRect(0,0,200,200);

</script>

</body>

</html>

canvas标签的使用的更多相关文章

canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球
从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...
html5 canvas标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
HTML5新增Canvas标签及对应属性、API详解（基础一）
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
html5之canvas困惑在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？
<canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...
HTML5 canvas标签绘制正三角形鼠标按下点为中间点，鼠标抬起点为其中一个顶点
用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...
[html5] 学习笔记-Canvas标签的使用
Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...
HTML5的canvas标签制作黑客帝国里的简单画面
1.加入canvas标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> ...
JS canvas标签动态绘制图型
使用canvas标签动态绘制图型,当点击鼠标时,以鼠标点击的坐标作为图形中心点.当点击数为偶数时画三角形,当点击数为奇数时画五角星 <!DOCTYPE HTML> <html> ...
Canvas标签基础
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

SQL执行过程中的性能负载点
一.SQL执行过程 1.用户连接数据库,执行SQL语句: 2.先在内存进行内存读,找到了所需数据就直接交给用户工作空间: 3.内存读失败,也就说在内存中没找到支持SQL所需数据,就进行物理读,也就是到 ...
JavaScript中闭包实现的私有属性的getter()和setter()方法
注意: 以下的输出都在浏览器的控制台中 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
memcache缓存安装配置
memcache是高性能,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度.目前用memcache解决互联网上的大用户读取是非常流行的一种用法. 下载安装前提要先安装libev ...
VMware虚拟机下Ubuntu连不上网解决
虚拟机:VMware® Workstation 12 Pro Ubuntu: 14.04 问题描述:电脑从公司拿到家打开Ubuntu之后,打开自带Firefox浏览器,显示连接不上网,终端下ping ...
nopCommerce 3.9 大波浪系列之 NUnit 配置调试环境
官网:http://nunit.org/ GitHub:https://github.com/nunit 本文只介绍NUnit在VS中的配置使用,进一步学习 NUnit 请参考官方文档. nopCom ...
如何开始使用bootstrap
登陆Bootstrap官网:http://getbootstrap.com/ Bootstrap中的JS插件依赖于jQuery,因此jQuery要在Bootstrap之前引用 bootstrap框架初 ...
iOS图解多线程
前言多线程一直是iOS开发中重中之重的话题,无论是面试还是真正在公司中进行业务开发,都会经常使用到多线程来开发.笔者在简书上看到一张图,记录的是多线程的相关知识,笔者认为这是非常好的,推荐给大家: ...
Selenium对浏览器支持的版本
最新的selenium与几种常用浏览器的版本兼容情况: selenium 3.4.0 : Mozilla GeckoDriver 0.18 -- Firefox 53 - 56 Google Ch ...
android studio生成junitLibs
apply plugin: 'com.android.application'android { compileSdkVersion 24 buildToolsVersion "25.0.0 ...
【Django】django 处理request流程细节（转）
首先发生的是一些和 Django 有关(前期准备)的其他事情,分别是: 如果是 Apache/mod_python 提供服务,request 由 mod_python 创建的 django.core. ...

canvas标签的使用

canvas标签的使用的更多相关文章

随机推荐

热门专题