1<! DOCTYPE html>234<title>insert you title</title>5<meta name= ' description ' content= ' This is my page ' >6<meta name= ' keywords ' content= ' keyword1,keyword2,keyword3 ' >7<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">8<link rel= ' stylesheet ' type= ' text/css ' href= './css/index.css '/>9<script type= ' text/javascript ' src= './js/jquery-1.12.1.min.js ' ></script>Ten<style type= ' text/css ' > One Html,body { Amargin:0; padding:0; - } - the HTML { -Background: #999; - } - + #can { -Background: #FFF; Display:block; MARGIN:75PX Auto; border-radius:2px; + } A</style> at<script type= ' Text/javascript ' > -$(function(){ - varOcan = $ (' #can '). Get (0). GetContext (' 2d ' ); - Ocan.beginpath (); - - /* in - the difference between Ocan.stroketext (text,x,y) and Ocan.filltext (text,x,y): to the difference between a solid and a hollow font; + - ocan.font: Setting font style and size the * ocan.textalign: Set the horizontal alignment of text on a baseline $ Panax Notoginseng ocan.textbaseline: Sets the alignment of text in the vertical direction - the + A */ the +Ocan.font = ' 40px Microsoft yahei ';/*This property is the same as rotating the zoom translation that needs to be set in front of otherwise invalid and the font size and font style are integral*/ -Ocan.linewidth = 1; $Ocan.strokestyle = ' #F00 '; $ocan.textalign = ' center ';/*implement attribute values at the horizontal position of the baseline left right start center end*/ -Ocan.textbaseline = ' bottom ';/*Implement the attribute value top bottom middle hanging on the vertical position of the baseline ...*/ -Ocan.stroketext (' window lattice teacher good handsome Xem ', 250, 250);/*set up a hollow font*/ theOcan.arc (2, 0, 2 * math.pi,false ); -Ocan.filltext (' The window lattice teacher is very handsome ', 30, 300);/*set a solid fill font*/Wuyi Ocan.stroke (); the Ocan.closepath (); - } ); Wu</script> - About<body> $<canvas id= ' can ' width= ' height= ' > Your browser version is too low, please upgrade your browser version for a better user experience ...</canvas> -</body> -
[HTML canvas drawing text] Canvas drawing implements drawing text Stroketext Filltext method and TextAlign textbaseline Font Property Instance Demo